ChartJs 顯示錯誤的數據標簽（x 軸日期）

Question

我有一個 ChartJs 圖表，下面是代碼

chartColor = "#FFFFFF";
var ctx = document.getElementById('bigDashboardChart').getContext("2d");

var gradientStroke = ctx.createLinearGradient(500, 0, 100, 0);
gradientStroke.addColorStop(0, '#80b6f4');
gradientStroke.addColorStop(1, chartColor);

var gradientFill = ctx.createLinearGradient(0, 200, 0, 50);
gradientFill.addColorStop(0, "rgba(128, 182, 244, 0)");
gradientFill.addColorStop(1, "rgba(255, 255, 255, 0.24)");

gradientFill2 = ctx.createLinearGradient(0, 170, 0, 50);
gradientFill2.addColorStop(0, "rgba(128, 182, 244, 0)");
gradientFill2.addColorStop(1, hexToRGB('#edd505', 0.4));

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['2020-02-07','2020-02-08','2020-02-09','2020-02-10','2020-02-11','2020-02-12','2020-02-13'],
    datasets: [{
      label: "Ujani Total Water",
      borderColor: chartColor,
      pointBorderColor: chartColor,
      pointBackgroundColor: "#1e3d60",
      pointHoverBackgroundColor: "#1e3d60",
      pointHoverBorderColor: chartColor,
      pointBorderWidth: 1,
      pointHoverRadius: 7,
      pointHoverBorderWidth: 2,
      pointRadius: 5,
      fill: true,
      backgroundColor: gradientFill,
      borderWidth: 2,
      data: [{ 'x' : '2020-02-07', 'y' : 16483111.23},{ 'x' : '2020-02-08', 'y' : 5624132.01},{ 'x' : '2020-02-09', 'y' : 9800147.12},{ 'x' : '2020-02-10', 'y' : 17204617.82},{ 'x' : '2020-02-11', 'y' : 19318882.05},{ 'x' : '2020-02-12', 'y' : 6291494.27},{ 'x' : '2020-02-13', 'y' : 10536864.88}]
    },
    {
      label: "Chandani Total Water",
      borderColor: "#edd505",
      pointBorderColor: "#FFF",
      pointBackgroundColor: "#edd505",
      pointHoverBackgroundColor: "#edd505",
      pointHoverBorderColor: "#FFF",
      pointBorderWidth: 1,
      pointHoverRadius: 7,
      pointHoverBorderWidth: 2,
      pointRadius: 5,
      fill: true,
      backgroundColor: gradientFill2,
      borderWidth: 2,
      data: [{ 'x' : '2020-02-11', 'y' : 744864.1},{ 'x' : '2020-02-12', 'y' : 544.93},{ 'x' : '2020-02-13', 'y' : 1564922.77}]
    }]
  },
  options: {
    layout: {
      padding: {
        left: 20,
        right: 20,
        top: 0,
        bottom: 0
      }
    },
    maintainAspectRatio: false,
    tooltips: {
      backgroundColor: '#fff',
      titleFontColor: '#333',
      bodyFontColor: '#666',
      bodySpacing: 4,
      xPadding: 12,
      mode: "nearest",
      intersect: 0,
      position: "nearest"
    },
    legend: {
      position: "top",
      fillStyle: "#FFF",
      display: true
    },
    scales: {
      yAxes: [{
        stacked : false,
        ticks: {
          fontColor: "rgba(255,255,255,0.4)",
          fontStyle: "bold",
          beginAtZero: true,
          min: 0,
          maxTicksLimit: 5,
          padding: 10
        },
        gridLines: {
          drawTicks: true,
          drawBorder: false,
          display: true,
          color: "rgba(255,255,255,0.1)",
          zeroLineColor: "transparent"
          }
      }],
      xAxes: [{
        gridLines: {
          zeroLineColor: "transparent",
          display: false,

        },
        ticks: {
          beginAtZero : true,
          padding: 10,
          min: 0,
          fontColor: "rgba(255,255,255,0.4)",
          fontStyle: "bold"
        }
      }]
    }
  }
});

您也可以看到圖像，第一點的圖像中顯示的日期相同，但實際上黃色數據集的日期從病房的 2020-02-11 開始。

或者這是因為我沒有正確實現具有多個數據集的圖表？ 任何幫助表示贊賞。 另外，如果需要任何其他信息，請告訴我。

注意：這只有 1 個圖表，我剛剛顯示了 2 個圖像以顯示錯誤的起點標簽。

更新：在通過其他 Stack Overflow 和其他答案后，嘗試將“標簽”添加到這樣的單個數據集。

 {
      label: "Chandani Total Water",
      labels : ['2020-02-11','2020-02-12','2020-02-13'],
      borderColor: "#edd505",
      pointBorderColor: "#FFF",
      pointBackgroundColor: "#edd505",
      pointHoverBackgroundColor: "#edd505",
      pointHoverBorderColor: "#FFF",
      pointBorderWidth: 1,
      pointHoverRadius: 7,
      pointHoverBorderWidth: 2,
      pointRadius: 5,
      fill: true,
      backgroundColor: gradientFill2,
      borderWidth: 2,
      data: [{ 'x' : '2020-02-11', 'y' : 744864.1},{ 'x' : '2020-02-12', 'y' : 544.93},{ 'x' : '2020-02-13', 'y' : 1564922.77}]
    }

Answer 1

您應該將xAxis定義為時間笛卡爾軸。

為此，請將以下內容添加到圖表options內的xAxis 。

xAxes: [{
    type: 'time',
    time: {
      unit: 'day'
    },
    ...

請注意 Chart.js 使用 Moment.js 來實現時間軸的功能。 因此，您應該使用在單個文件中包含 Moment.js 的 Chart.js 的捆綁版本。

請查看下面的可運行代碼片段。

 var chartColor = "#FFFFFF"; var ctx = document.getElementById('bigDashboardChart').getContext("2d"); var gradientStroke = ctx.createLinearGradient(500, 0, 100, 0); gradientStroke.addColorStop(0, '#80b6f4'); gradientStroke.addColorStop(1, chartColor); var gradientFill = ctx.createLinearGradient(0, 200, 0, 50); gradientFill.addColorStop(0, "rgba(128, 182, 244, 0)"); gradientFill.addColorStop(1, "rgba(255, 255, 255, 0.24)"); var gradientFill2 = ctx.createLinearGradient(0, 170, 0, 50); gradientFill2.addColorStop(0, "rgba(128, 182, 244, 0)"); gradientFill2.addColorStop(1, "rgba(237, 213, 5, 0.4)"); new Chart(ctx, { type: 'line', data: { labels: ['2020-02-07', '2020-02-08', '2020-02-09', '2020-02-10', '2020-02-11', '2020-02-12', '2020-02-13'], datasets: [{ label: "Ujani Total Water", borderColor: chartColor, pointBorderColor: chartColor, pointBackgroundColor: "#1e3d60", pointHoverBackgroundColor: "#1e3d60", pointHoverBorderColor: chartColor, pointBorderWidth: 1, pointHoverRadius: 7, pointHoverBorderWidth: 2, pointRadius: 5, fill: true, backgroundColor: gradientFill, borderWidth: 2, data: [{ 'x': '2020-02-07', 'y': 16483111.23 }, { 'x': '2020-02-08', 'y': 5624132.01 }, { 'x': '2020-02-09', 'y': 9800147.12 }, { 'x': '2020-02-10', 'y': 17204617.82 }, { 'x': '2020-02-11', 'y': 19318882.05 }, { 'x': '2020-02-12', 'y': 6291494.27 }, { 'x': '2020-02-13', 'y': 10536864.88 }] }, { label: "Chandani Total Water", borderColor: "#edd505", pointBorderColor: "#FFF", pointBackgroundColor: "#edd505", pointHoverBackgroundColor: "#edd505", pointHoverBorderColor: "#FFF", pointBorderWidth: 1, pointHoverRadius: 7, pointHoverBorderWidth: 2, pointRadius: 5, fill: true, backgroundColor: gradientFill2, borderWidth: 2, data: [{ 'x': '2020-02-11', 'y': 744864.1 }, { 'x': '2020-02-12', 'y': 544.93 }, { 'x': '2020-02-13', 'y': 1564922.77 }] } ] }, options: { layout: { padding: { left: 20, right: 20, top: 0, bottom: 0 } }, maintainAspectRatio: false, tooltips: { backgroundColor: '#fff', titleFontColor: '#333', bodyFontColor: '#666', bodySpacing: 4, xPadding: 12, mode: "nearest", intersect: 0, position: "nearest" }, legend: { position: "top", fillStyle: "#FFF", display: true }, scales: { yAxes: [{ stacked: false, ticks: { fontColor: "rgba(255,255,255,0.4)", fontStyle: "bold", beginAtZero: true, min: 0, maxTicksLimit: 5, padding: 10 }, gridLines: { drawTicks: true, drawBorder: false, display: true, color: "rgba(255,255,255,0.1)", zeroLineColor: "transparent" } }], xAxes: [{ type: 'time', time: { unit: 'day' }, gridLines: { zeroLineColor: "transparent", display: false }, ticks: { beginAtZero: true, padding: 10, min: 0, fontColor: "rgba(255,255,255,0.4)", fontStyle: "bold" } }] } } });

 body { background-color: black }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script> <canvas id="bigDashboardChart"></canvas>