[英]Bar Chart Highchart.JS to C3.JS
我需要将此Highcharts.JS图表转换为C3.JS图表
http://i.imgur.com/iwk3pyO.png
这是Highcharts.JS代码:
var chart = new Highcharts.Chart({
xAxis: {
title: {
text: 'Values'
}
},
yAxis: {
title: {
text: ' Frequency',
align: 'high',
offset: 23
}
},
legend: {
enabled: false
},
tooltip: {
enabled: false
},
series: [
{
data: []
}
]
});
转换为C3.JS后,我遇到了x值问题。 默认情况下,C3.JS的条形图将每个条形的值分配为0、1、2,... n,而不是我想要的值,如下所示:
var xData = [0.1384261, 0.2337903, 0.3291545, 0.4245187, 0.5198829, 0.6152470999999999, 0.7106113000000001, 0.8059755, 0.9013397000000001, 0.9967039];
我试图以某种方式“欺骗”它以将x值显示为标签,但是这里的问题是背面的红色区域。 我将区域设置为以0到1的值显示,但是您会在C3.JS中注意到,该区域位于第一和第二个小节中,而不是最后一个图形之后,因为它的值小于1。
也许要晚一点,但是如果有人仍然需要它(或在条形图中使用数字X轴)。 这是一个主意:
代替
regions: [
{start: 0, end: 1, class: 'red-color'}
]
您需要根据how many items are less than 1 in your categories?
来确定end
价值how many items are less than 1 in your categories?
。 您的代码可能像这样:
function fctGetItemLessThan1(xData){
//implement your count logic here + return value
}
然后在图表选项中:
...
regions: [
{start: fctGetItemLessThan1() - 1, end: fctGetItemLessThan1(), class: 'red-color'}
]
...
在您的情况下, fctGetItemLessThan1() - 1 = 9
,结果如下
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.