条形图 Highchart.JS 到 C3.JS答案

【问题标题】：Bar Chart Highchart.JS to C3.JS条形图 Highchart.JS 到 C3.JS
【发布时间】：2016-08-15 06:53:07
【问题描述】：

我需要将此 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 的条形图将值分配给每个条，而不是我想要的值，如下所示：

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。

https://jsfiddle.net/joefclarin/dh5epj0v/

【问题讨论】：

标签： javascript graph charts c3.js

【解决方案1】：

可能有点晚了，但如果有人仍然需要它（或在条形图中使用数字 X 轴）。这是一个想法：

代替

regions: [
    {start: 0, end: 1, class: 'red-color'}
]

您需要根据how many items are less than 1 in your categories? 破解end 值。你的代码可能是这样的：

function fctGetItemLessThan1(xData){
    //implement your count logic here + return value
}

然后在您的图表选项中：

...
regions: [
    {start: fctGetItemLessThan1() - 1, end: fctGetItemLessThan1(), class: 'red-color'}
]
...

在你的情况下，fctGetItemLessThan1() - 1 = 9，结果如下

【讨论】：