ChartJS：將圖表上的零點與多軸對齊

Question

如何在圖表上將零點與多軸對齊，如果數據集中同時存在正值和負值？

我想要零位在同一行上。

我不喜歡這樣的： Graph image

link to jsfiddle

new Chart(canvas, { 
    type: 'line', 
    data: { 
    labels: ['1', '2', '3', '4', '5'], 
    datasets: [{ 
     label: 'A', 
     yAxisID: 'A', 
     data: [-10, 96, 84, 76, 69] 
    }, { 
     label: 'B', 
     yAxisID: 'B', 
     data: [-2, 3, 5, 2, 3] 
    }] 
    }, 
    options: { 
    scales: { 
     yAxes: [{ 
     id: 'A', 
     type: 'linear', 
     position: 'left', 
     }, { 
     id: 'B', 
     type: 'linear', 
     position: 'right', 

     }] 
    } 
    } 
}); 

actualy，官方網頁上的例子有同樣的問題。看起來很混亂。

Answer 1

您可以通過在軸上設置ticks選項來控制最大值，最小值和步長。要使零點對齊，您需要使軸線對稱。如果您希望網格線也對齊，則可以使用stepSize。

在您的例子：

yAxes: [{ 
    id: 'A', 
    type: 'linear', 
    position: 'left', 
    ticks : { 
     max: 100, 
     min: -50, 
     stepSize: 50 
    } 
    }, { 
    id: 'B', 
    type: 'linear', 
    position: 'right', 
    ticks : { 
     max: 6, 
     min: -3, 
     stepSize: 3 
    } 
    }] 

見更新小提琴：https://jsfiddle.net/x885kpe1/1/