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

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

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

}）

有没有什么办法可以做到这一点？在此先感谢。

来源

2017-09-19 Aditya Sharma

您可以用计量对象的生成方法改变最大值：

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

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

来源

2017-09-19 09:50:58 MattjeS

感谢您的评论，但对于像销售目标，利润等实际数据最大值可能会有所不同，在0-100范围内显示超过100％的数字将不可行。我的意思是说，像我们在径向进展中所能做的那样，必须有某种方法可以展现150％。 –

我不太确定你可以使用量表来实现这一点。如果它是200％，你希望展示什么？我想你可以展示两个戒指，你可能需要扩展c3来支持你在找的东西，因为我不认为它会开箱即用。我会看看你，虽然 – MattjeS

确切地说，它应该有多个弧以上的情况下，超过100％。我怎样才能扩展C3库？有没有任何文件？ –

改变这种

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

到

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

添加此功能，但你必须deffine数据最小值最大值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))

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

来源

2017-09-19 10:00:13 KEKUATAN

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

回答

相关问题