當線未從第一個標簽開始時，Chart.js 折線圖工具提示顯示錯誤的標簽

Question

我有與X軸5層的標簽的簡單線圖： 'Oct 2018', 'Jan 2019', 'Apr 2019', 'Jul 2019', 'Oct 2019' ，並且具有僅在3個中間標簽的點的線'Jan 2019', 'Apr 2019', 'Jul 2019' 。

問題是當行數據不是從第一個標簽開始時（就像我的例子），工具提示在懸停時顯示不正確的標簽。 如下圖所示，當我將鼠標懸停在'Apr 2019'數據點上時，工具提示顯示'Jan 2019' 。 同樣，當我將鼠標懸停在'Jul 2019'數據點上時，工具提示顯示'Apr 2019' 。 你能告訴我我錯過了什么嗎？

這是代碼：

<canvas id="canvas" ></canvas>
<script>
    var lineChartData = {
        labels: ['Oct 2018', 'Jan 2019', 'Apr 2019', 'Jul 2019', 'Oct 2019'],
        datasets: [
            {
                label: 'Oranges',
                borderColor: window.chartColors.blue,
                backgroundColor: window.chartColors.blue,
                fill: false,
                data: 
                [
                    {y: 30, x: 'Jan 2019'},
                    {y: 20, x: 'Apr 2019'},
                    {y: 25, x: 'Jul 2019'},
                ],              
            }           
        ]
    };

    window.onload = function() {
        var ctx = document.getElementById('canvas').getContext('2d');
        window.myLine = Chart.Line(ctx, {
            data: lineChartData,
            options: {
                responsive: true,
                hoverMode: 'index',
                stacked: false,
                scales: {
                    yAxes: [{
                        type: 'linear',
                        display: true,
                        position: 'left'
                    }],
                }
            }
        });
    };
</script>

Answer 1

Chart.js不喜歡將日期標簽作為字符串。 您應該使用Date()或momentjs()對象來給出日期。

---

使用 MomentJS，您的圖表可能如下所示；

 const newDate = (mdy) => moment(mdy, "MM-DD-YYYY"); var lineChartData = { labels: [newDate('9-1-2018'), newDate('1-1-2019'), newDate('4-1-2019'), newDate('6-1-2019'), newDate('9-1-2019')], datasets: [{ label: 'Oranges', borderColor: 'blue', backgroundColor: 'orange', fill: false, data: [ { y: 30, x: newDate('1-1-2019') }, { y: 20, x: newDate('4-1-2019') }, { y: 25, x: newDate('6-1-2019') } ], }] }; window.onload = function() { var ctx = document.getElementById('canvas').getContext('2d'); window.myLine = Chart.Line(ctx, { data: lineChartData, options: { hover: { mode: 'new mode' }, responsive: true, hoverMode: 'index', stacked: false, scales: { yAxes: [{ type: 'linear', display: true, position: 'left' }], xAxes: [{ type: 'time', time: { displayFormats: { 'millisecond': 'MMM YY', 'second': 'MMM YY', 'minute': 'MMM YY', 'hour': 'MMM YY', 'day': 'MMM YY', 'week': 'MMM YY', 'month': 'MMM YY', 'quarter': 'MMM YY', 'year': 'MMM YY', } } }] } } }); };

 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script> <canvas id="canvas" ></canvas>

^{（注意；我可以刪除多余的空數據，請查看Chartjs 時間文檔）}

---

編輯：基於評論，一個更完整的解決方案，原始數據被解析為 OP 的意圖。

 const newDate = (mdy) => moment(mdy, "MMM YYYY"); const data = { labels: ['Oct 2018', 'Jan 2019', 'Apr 2019', 'Jul 2019', 'Oct 2019'], points: [ {y: 30, x: 'Jan 2019'}, {y: 20, x: 'Apr 2019'}, {y: 25, x: 'Jul 2019'} ] }; var lineChartData = { labels: data.labels.map(l => newDate(l)), datasets: [{ label: 'Oranges', borderColor: 'blue', backgroundColor: 'orange', fill: false, data: data.points.map(p => { return { ...p, x: newDate(px) } }) }] }; window.onload = function() { var ctx = document.getElementById('canvas').getContext('2d'); window.myLine = Chart.Line(ctx, { data: lineChartData, options: { hover: { mode: 'new mode' }, responsive: true, hoverMode: 'index', stacked: false, scales: { yAxes: [{ type: 'linear', display: true, position: 'left' }], xAxes: [{ type: 'time', time: { parser: 'MMM YYYY', tooltipFormat: 'MMM YYYY', displayFormats: { 'millisecond': 'MMM YYYY', 'second': 'MMM YYYY', 'minute': 'MMM YYYY', 'hour': 'MMM YYYY', 'day': 'MMM YYYY', 'week': 'MMM YYYY', 'month': 'MMM YYYY', 'quarter': 'MMM YYYY', 'year': 'MMM YYYY', } } }] } } }); };

 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script> <canvas id="canvas" ></canvas>

Answer 2

基本上，答案是替換這個：

[
    {y: 30, x: 'Jan 2019'},
    {y: 20, x: 'Apr 2019'},
    {y: 25, x: 'Jul 2019'},
]

有了這個：

[null, 30, 20, 25, null]