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

我想用C3.js库显示当前进度的图表，如下所示。 但是C3.js中不支持径向进度 我试着用仪表图 但对于所有大于100%的值，它仅显示100%。 这是小提琴

})

我有办法做到吗？

---

提前感谢。

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

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

我在这里更新了你的小提琴：

更改此项

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

到

添加此函数，但您必须取消对数据最小最大cos饼图的定义，仅附加在表示0-100的百分比上

var yScale=d3.scale.linear（）
.domain（[100500]）//min-max您的数据
.range（[0100]）//此修复错误表示这是一个百分比，您必须定义数据最小值最大值并将其转换
console.log（yScale（150））

---

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

这是一把小提琴：

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

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答案的修改版本：

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

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

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
  }
})