条形图Highchart.JS到C3.JS

Question

我需要将此Highcharts.JS图表转换为C3.JS图表

http://i.imgur.com/iwk3pyO.png

这是Highcharts.JS代码：

var xData = [0.1384261, 0.2337903, 0.3291545, 0.4245187, 0.5198829, 0.6152470999999999, 0.7106113000000001, 0.8059755, 0.9013397000000001, 0.9967039];

转换为C3.JS后，我遇到了x值问题。默认情况下，C3.JS的条形图将每个条形的值分配为0,1,2，... n而不是我想要的值，如下所示：

if ($result = mysqli_query($link, $query)) {

    /* fetch associative array */
    while ($row = mysqli_fetch_assoc($result)) {

    }

    /* free result set */
    mysqli_free_result($result);
}

我试图以某种方式＆＃34;技巧＆＃34;它将x值显示为标签，但这里的问题是后面的红色区域。我将区域设置为以0到1的值显示，但您会在C3.JS中注意到该区域位于第一个和第二个条形图中，而不是在最后一个图形之后，因为它的值小于1。

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

Answer 1

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

而不是

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

您需要根据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，结果如下