Javascript 在图表JS2中显示错误信息

我尝试使用chartjs 2显示example1和example2数据。当我创建图表时，它工作正常并显示图形。但当我停留在图形点上时，它显示的是正确的信息，而图形显示的是错误的信息

是这样的表演吗

在上面的屏幕截图中，y轴显示为10，但点悬停显示为6 如何解决这个问题

这是密码

---

数据创建导致了问题。检查

var标签=[]； 变量s=[{ 示例1:{'01-Mar-17'：'0'，'02-Mar-17'：'6'}， 示例2:{'01-Mar-17'：'0'，'02-Mar-17'：'4'} }]; 变量示例1=[]； 变量示例2=[]； $.eachs，functioni，item{ $.eachitem.example1，functioni，j{ 普氏标签； 例1.pushj； }; $.eachitem.example2，functioni，j{ 例2.pushj； }; }; var ctx=document.getElementById'chartdata'； var myChart=新的Chartctx{ 键入：“行”， 数据：{ 标签：标签， 数据集：[{ 标签：“示例1”， 填充：假， 线张力：0.1， 背景颜色：“00a3d0”， 边框颜色：“00a3d0”， borderCapStyle:“butt”， borderDash:[]， borderDashOffset:0.0， borderJoinStyle:'斜接'， pointBorderColor:'00a3d0'， pointBackgroundColor:fff， 点边界宽度：1， 点半径：5， pointHoverBackgroundColor:'00a3d0'， pointHoverBorderColor:'00a3d0'， pointHoverBorderWidth:2， 点半径：1， 点半径：10， 数据：例1， 斯潘：错， }, { 标签：“示例2”， 填充：假， 线张力：0.1， 背景颜色：“8a6d3b”， 边框颜色：“8a6d3b”， borderCapStyle:“butt”， borderDash:[]， borderDashOffset:0.0， borderJoinStyle:'斜接'， pointBorderColor:'8a6d3b'， pointBackgroundColor:fff， 点边界宽度：1， 点半径：5， pointHoverBackgroundColor:'8a6d3b'， pointHoverBorderColor:'8a6d3b'， pointHoverBorderWidth:2， 点半径：1， 点半径：10， 数据：例2， 斯潘：错， } ] }, 选项：{ 回答：是的， 比例：{ 雅克斯：[{ 错,， 滴答声：{ 分:0,， 步长：5， } }] } } };

---

数据创建导致了问题。检查

var标签=[]； 变量s=[{ 示例1:{'01-Mar-17'：'0'，'02-Mar-17'：'6'}， 示例2:{'01-Mar-17'：'0'，'02-Mar-17'：'4'} }]; 变量示例1=[]； 变量示例2=[]； $.eachs，functioni，item{ $.eachitem.example1，functioni，j{ 普氏标签； 例1.pushj； }; $.eachitem.example2，functioni，j{ 例2.pushj； }; }; var ctx=document.getElementById'chartdata'； var myChart=新的Chartctx{ 键入：“行”， 数据：{ 标签：标签， 数据集：[{ 标签：“示例1”， 填充：假， 线张力：0.1， 背景颜色：“00a3d0”， 边框颜色：“00a3d0”， borderCapStyle:“butt”， borderDash:[]， borderDashOffset:0.0， borderJoinStyle:'斜接'， pointBorderColor:'00a3d0'， pointBackgroundColor:fff， 点边界宽度：1， 点半径：5， pointHoverBackgroundColor:'00a3d0'， pointHoverBorderColor:'00a3d0'， pointHoverBorderWidth:2， 点半径：1， 点半径：10， 数据：例1， 斯潘：错， }, { 标签：“示例2”， 填充：假， 线张力：0.1， 背景颜色：“8a6d3b”， 边框颜色：“8a6d3b”， borderCapStyle:“butt”， borderDash:[]， borderDashOffset:0.0， borderJoinStyle:'斜接'， pointBorderColor:'8a6d3b'， pointBackgroundColor:fff， 点边界宽度：1， 点半径：5， pointHoverBackgroundColor:'8a6d3b'， pointHoverBorderColor:'8a6d3b'， pointHoverBorderWidth:2， 点半径：1， 点半径：10， 数据：例2， 斯潘：错， } ] }, 选项：{ 回答：是的， 比例：{ 雅克斯：[{ 错,， 滴答声：{ 分:0,， 步长：5， } }] } } };

---

数据集失败的原因是什么 ed“示例2”在y轴上的值为10而不是6，这是因为您如何配置折线图

您已将y轴配置为堆叠：true，因此您真正看到的是一个。请参阅下面的配置，该配置直接取自您的问题

scales: {
  yAxes: [{
    stacked: true,
    ticks: {
      min: 0,
      stepSize: 5,
    }
  }]
}

堆叠折线图的工作原理是将每个数据集打印在另一个数据集的正上方。在这种情况下，该点的y值为6，因此将其添加到上一个数据集的y值（即4）中，以在y轴上绘制10处的点

要更改此设置，只需将stacked:false设置为false，两条线都将按预期进行打印

scales: {
  yAxes: [{
    stacked: false,
    ticks: {
      min: 0,
      stepSize: 5,
    }
  }]
}

---

请参见此示例。

名为“示例2”的数据集在y轴上的位置为10而不是6的原因在于您如何配置折线图

您已将y轴配置为堆叠：true，因此您真正看到的是一个。请参阅下面的配置，该配置直接取自您的问题

scales: {
  yAxes: [{
    stacked: true,
    ticks: {
      min: 0,
      stepSize: 5,
    }
  }]
}

堆叠折线图的工作原理是将每个数据集打印在另一个数据集的正上方。在这种情况下，该点的y值为6，因此将其添加到上一个数据集的y值（即4）中，以在y轴上绘制10处的点

要更改此设置，只需将stacked:false设置为false，两条线都将按预期进行打印

scales: {
  yAxes: [{
    stacked: false,
    ticks: {
      min: 0,
      stepSize: 5,
    }
  }]
}

---

请参阅此示例。

谢谢RonyLoud，但您的解决方案不起作用！在您的解决方案示例2中，有4个，其显示多于10个！只是因为示例2没有自己的标签嘿，伙计！！！当我在一个图表中获取两个数据时，我也会遇到同样的错误。当我只使用示例1时，它可以完美地工作，但是现在，当我添加第二个数据（如示例2）时，我面临着真正的问题。示例2是示例1数据。如果示例1的值是4，示例2的值是6，那么我在图表示例1中得到的结果是10。@Hi！你能分享你的例子吗。检查感谢RonyLoud，但在您的解决方案中不起作用！在您的解决方案示例2中，有4个，其显示多于10个！只是因为示例2没有自己的标签嘿，伙计！！！当我在一个图表中获取两个数据时，我也会遇到同样的错误。当我只使用示例1时，它可以完美地工作，但是现在，当我添加第二个数据（如示例2）时，我面临着真正的问题。示例2是示例1数据。如果示例1的值是4，示例2的值是6，那么我在图表示例1中得到的结果是10。@Hi！你能分享你的例子吗。检查完毕！。。。太棒了。谢谢你，乔丹威利斯，完成了！。。。太棒了。谢谢你，乔丹威利斯。