條形圖Highchart.JS至C3.JS

Question

我需要將此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。

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

Answer 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 ，結果如下