Javascript 条形图Highchart.JS至C3.JS

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

这是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'}
]

您需要根据

类别中少于1项的项数对
end
值进行破解？

。您的代码可能如下所示：

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

然后在图表选项中：

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

在您的例子中，

fctGetItemLessThan1（）-1=9

，结果如下