Question

我想像这样使用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'
}

}）

我有什么方法可以做到吗？提前谢谢。

Answer 1

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

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

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

Answer 2

更改此

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

到

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

添加此功能但您必须定义数据最小值最大值饼图仅追加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))

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 3

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

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

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

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

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

3 个答案: