在 c3 仪表图中显示大于 100 的百分比值答案

【问题标题】：Show percentage value greater than 100 in c3 gauge chart在 c3 仪表图中显示大于 100 的百分比值
【发布时间】：2017-09-19 09:26:07
【问题描述】：

我想使用这样的 C3.js 库显示当前进度的图表。但是在 C3.js 中不支持径向进度我尝试使用仪表图http://c3js.org/samples/chart_gauge.html 但对于所有大于 100% 的值，它仅显示 100%。这是小提琴https://jsfiddle.net/iamaditya/pmgyx58t/

var chart1 = c3.generate({
bindto: '#test',
data: {
    columns: [ ['data', 150] ],
    type: 'gauge'
}

})

有什么办法可以做到吗？提前致谢。

【问题讨论】：

标签： d3.js charts data-visualization c3.js

【解决方案1】：

我相信你可以为所欲为。我建议您在显示图表之前先计算所需的最大百分比（使用您将要显示的数据进行此计算）然后将该数字用作最大值...并设置标签功能。

这是一个小提琴：https://jsfiddle.net/jzwolak/Lj0qg693/

这是相关代码...我确实将硬编码的最大值从小提琴更改为函数以反映我的第一个建议。

var chart1 = c3.generate({
  bindto: '#test',
  data: {
    columns: [
      ['data', 150]
    ],
    type: 'gauge'
  },
  gauge: {
    label: {
      format: function(value, ratio) {
        return value; //returning here the value and not the ratio
      },
    },
    min: 0,
    max: calcMaxFromCurrentData(),
    units: '%' //this is only the text for the label
  }
})

我的答案是 SO 答案的修改版本：https://stackoverflow.com/a/27026308/361855

【讨论】：

【解决方案2】：

您可以使用 generate 方法中的仪表对象更改最大值：

var chart1 = c3.generate({
    bindto: '#test',
    data: {
        columns: [ ['data', 150] ],
        type: 'gauge'        
    }, 
    gauge: {
        max: 200
    }
})

我在这里更新了你的小提琴：https://jsfiddle.net/pmgyx58t/1/

【讨论】：

感谢您的评论，但对于销售目标、利润等最大值可能会有所不同，并且在 0-100 范围内显示超过 100% 的数字是不可行的。我的意思是，必须有某种方法来显示 150%，就像我们在径向进度中可以做的那样。
我不太确定您能否使用仪表图实现这一目标。如果是 200%，您希望显示什么？我想你可以展示两个环，你可能需要扩展 c3 来支持你正在寻找的东西，因为我认为它不会开箱即用。不过我会帮你看看
正好它应该有多个弧，以防超过100%。如何扩展 C3 库？有这方面的文件吗？
他们的 github 在这里：github.com/c3js/c3 这样您就可以分叉它并进行更改以支持多个环，然后您可以执行拉取请求，然后他们可以在下一个版本中包含您的更改，或者您可以为您的分叉创建一个版本并使用它。您可以通过 npm 安装它，或者如果您为 c3 引用单个 js 文件，您可以构建修改后的版本，然后引用输出的文件。
感谢您的信息。我会调查的。

【解决方案3】：

改变这个

   data: {
        columns: [ ['data', 150] ],
        type: 'gauge'
    }

到

data: {
    columns: [ ['data', yScale(150)] ],
    type: 'gauge'
}

添加此功能，但您必须定义您的数据最小最大 cos 饼图仅附加百分比，即 0 - 100

var yScale = d3.scale.linear()
                  .domain([100,500])//min max your data
                  .range([0,100])// this fix falue mean this is a percentage you must define your data min max and convert it
     
     console.log(yScale(150))

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;

【讨论】：