Php 显示错误数据标签的图表（x轴日期）

我有一个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开始。

或者这是因为我没有正确地使用多个数据集实现图表？感谢您的帮助。如果还需要其他信息，请告诉我

注意：这只是一张图表，我刚刚展示了两张图片，显示了错误的起点标签。

更新：在经历了其他堆栈溢出和其他应答之后，尝试像这样向单个数据集添加“标签”

 {
      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}]
    }

---

您应该将

xAxis

定义为一个

为此，请将以下内容添加到图表

选项中的
xAxis

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

请注意，Chart.js使用Moment.js作为
时间轴。因此，您应该使用Chart.js的名称，在单个文件中包含Moment.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（128182244，0）”）；
gradientFill.addColorStop（1，“rgba（255，255，255，0.24）”）；
var gradientFill2=ctx.createLinearGradient（0,170,0,50）；
渐变填充2.addColorStop（0，“rgba（128182244，0）”；
渐变填充2.addColorStop（1，“rgba（237213,5,0.4）”；
新图表（ctx{
键入：“行”，
数据：{
标签：['2020-02-07'，'2020-02-08'，'2020-02-09'，'2020-02-10'，'2020-02-11'，'2020-02-12'，'2020-02-13']，
数据集：[{
标签：“Ujani总水量”，
边框颜色：chartColor，
pointBorderColor:chartColor，
pointBackgroundColor:#1e3d60“，
pointHoverBackgroundColor:#1e3d60“，
pointHoverBorderColor:chartColor，
点边界宽度：1，
点半径：7，
pointHoverBorderWidth:2，
点半径：5，
填充：是的，
背景颜色：渐变填充，
边界宽度：2，
数据：[{
“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
}]
},
{
标签：“Chandani总水量”，
边框颜色：“edd505”，
pointBorderColor:#FFF“，
pointBackgroundColor:#edd505“，
pointHoverBackgroundColor:#edd505“，
pointHoverBorderColor:#FFF“，
点边界宽度：1，
点半径：7，
pointHoverBorderWidth:2，
点半径：5，
填充：是的，
背景颜色：gradientFill2，
边界宽度：2，
数据：[{
“x”：“2020-02-11”，
“y”：744864.1
}, {
“x”：“2020-02-12”，
“y”：544.93
}, {
“x”：“2020-02-13”，
“y”：1564922.77
}]
}
]
},
选项：{
布局：{
填充：{
左:20,，
右:20,，
排名：0，
底部：0
}
},
MaintaintAspectRatio:false，
工具提示：{
背景颜色：“#fff”，
标题字体颜色：“#333”，
bodyFontColor:“#666”，
车身间距：4，
加上：12，
模式：“最近的”，
交集：0，
位置：“最近的”
},
图例：{
位置：“顶部”，
填充样式：“FFF”，
显示：真
},
比例：{
雅克斯：[{
错,，
滴答声：{
fontColor:“rgba（255255,0.4）”，
字体：“粗体”，
贝吉纳泽罗：是的，
分:0,，
马克斯：5，
填充：10
},
网格线：{
没错，
抽边线：假，
显示：对，
颜色：“rgba（255255,0.1）”，
zeroLineColor:“透明”
}
}],
xAxes：[{
键入：“时间”，
时间：{
单位：'天'
},
网格线：{
zeroLineColor:“透明”，
显示：假
},
滴答声：{
贝吉纳泽罗：是的，
填充：10，
分:0,，
fontColor:“rgba（255255,0.4）”，
字体：“粗体”
}
}]
}
}
});
正文{
背景颜色：黑色
}

您的html代码？html部分没有太多内容。只有一行，就是这样。您好，在将此添加到xAxis后，图表根本没有显示。您可能伪造了一个逗号吗？不，实际上，仔细检查了一下，我在这里尝试了这个答案，因为它符合我的情况。我用一个可运行的代码片段更新了我的答案，应该可以说明我的建议是有效的。您是对的，感谢您的解释。虽然我在使用现成的模板时已经包含了moment.js文件，但我不想弄乱其他函数。谢谢