图表显示错误的数据标签（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开始在病房。

或者这是因为我没有正确地实现具有多个数据集的图表？任何帮助表示赞赏。另外请让我知道是否需要其他信息。

注意：这仅是一张图表，我刚刚显示了2张图像，显示了错误的起点标签。

更新：尝试通过其他堆栈溢出和其他答案后，将“标签”添加到这样的单个数据集。

 {
      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定义为time cartesian axis。

为此，将以下内容添加到图表xAxis内的options中。

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

[请注意，Chart.js使用Moment.js来实现时间轴。因此，您应该使用在单个文件中包含Moment.js的Chart.js的bundled version。

请查看下面的可运行代码段。

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>