在图表 js 2 中显示错误信息

Question

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

它的节目是这样的

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

这是代码

var lables = [];
    s = [{
        'example1' : '{01-Mar-17 : 0, 02-Mar-17 : 6}',
        'example2' : '{01-Mar-17: 0, 02-Mar-17: 4}'
    }]; 
    var example1 = [];
    var example2 = [];
    $.each(s.example1,function(i,j){
        lables.push(i);
        example1.push(j);
    });
    $.each(s.example2,function(i,k){
        example2.push(k);
    });
    var ctx = document.getElementById('chartdata').getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: lables,
        datasets: [{
            label: 'Example 1',
            fill: false,
            lineTension: 0.1,
            backgroundColor: convertHex('#00a3d0',40),
            borderColor: convertHex('#00a3d0',80),
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: convertHex('#00a3d0',90),
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: convertHex('#00a3d0',100),
            pointHoverBorderColor: convertHex('#00a3d0',100),
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: example1,
            spanGaps: false,
        }, {
            label: 'Example 2',
            fill: false,
            lineTension: 0.1,
            backgroundColor: convertHex('#8a6d3b',40),
            borderColor: convertHex('#8a6d3b',80),
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: convertHex('#8a6d3b',90),
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: convertHex('#8a6d3b',100),
            pointHoverBorderColor: convertHex('#8a6d3b',100),
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: example2,
            spanGaps: false,
        }
        ]
      },
      options: {
        responsive: true,
        scales: {
        yAxes: [{
            stacked: true,
            ticks: {
                min: 0,
                stepSize: 5,
            }
        }]
        }
    }
    });

Answer 1

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

您已将 y 轴配置为堆叠 ( stacked: true)，因此您真正看到的是堆叠折线图。请参阅下面的配置（直接从您的问题中获取）。

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

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

要更改此设置stacked: false，两条线都将按照您的预期绘制。

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

请参阅此代码笔示例。