Chartjs 2.7.3：將Y數據設置在正確的X位置軸上

Question

data: {
            labels: ['29 Oct, 18', '30 Oct, 18', '02 Nov, 18', '14 Nov, 18', '15 Nov, 18', '19 Nov, 18', '20 Nov, 18', '28 Nov, 18'],
            datasets: [{
                pointRadius: 0,
                label: 'Positive',
                lineTension: 0, 
                data: [{'x': '15 Nov, 18', 'y': 18636}],
                borderWidth: 1,
                backgroundColor: 'rgba(0, 255, 0, 0.5)', 
            },{
                pointRadius: 0,
                label: 'Negative',
                lineTension: 0, 
                data: [{'x': '29 Oct, 18', 'y': -20480}, {'x': '30 Oct, 18', 'y': -284}, {'x': '02 Nov, 18', 'y': -1625}, {'x': '14 Nov, 18', 'y': -6622}, {'x': '15 Nov, 18', 'y': -12991}, {'x': '19 Nov, 18', 'y': -1645}, {'x': '20 Nov, 18', 'y': -1230}, {'x': '28 Nov, 18', 'y': -39612}],
                borderWidth: 1,
                backgroundColor: 'rgba(255, 0, 0, 0.5)', 
            }]
        },

問題是綠色條位於錯誤的x位置。 它目前在'29 okt'，但我用'15 nov'標記了它

如何將這些數據集設置為正確的x位置

Answer 1

由於您指定了數據集的x/y坐標，因此必須在圖表選項xAxes比例類型設置為time 。

var options = {
  scales: {
    xAxes: [
      {
        type: "time"
      }
    ]
  }
};

有關所有可能的配置，請參閱官方文檔或查看下面的工作示例中使用的選項。

---

重要提示：你必須改變你的數據集類似日期格式'YYYY-MM-DD' ，否則moment會拋出這樣的警告 。

棄用警告：提供的值不是公認的RFC2822或ISO格式。 時刻構造回落到js Date（），這在所有瀏覽器和版本中都不可靠。

 var data = { labels: [ "2018-10-29", "2018-10-30", "2018-11-02", "2018-11-14", "2018-11-15", "2018-11-19", "2018-11-20", "2018-11-28" ], datasets: [{ pointRadius: 0, label: "Positive", lineTension: 0, data: [{ x: "2018-11-15", y: 18636 }], borderWidth: 1, backgroundColor: "rgba(0, 255, 0, 0.5)" }, { pointRadius: 0, label: "Negative", lineTension: 0, data: [{ x: "2018-10-29", y: -20480 }, { x: "2018-10-30", y: -284 }, { x: "2018-11-02", y: -1625 }, { x: "2018-11-14", y: -6622 }, { x: "2018-11-15", y: -12991 }, { x: "2018-11-19", y: -1645 }, { x: "2018-11-20", y: -1230 }, { x: "2018-11-28", y: -39612 } ], borderWidth: 1, backgroundColor: "rgba(255, 0, 0, 0.5)" } ] }; var options = { scales: { xAxes: [{ type: "time", distribution: 'series', time: { displayFormats: { day: 'D MMM, YY' } }, ticks: { source: "labels" }, gridLines: { display: false } }] } }; var ctx = document.getElementById("myChart").getContext("2d"); var myBarChart = new Chart(ctx, { type: "bar", data: data, options: options }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script> <canvas id="myChart" width="300" height="100"></canvas>