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

Question

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

它的表现是这样的

在上面的屏幕截图中，y 轴显示 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)，因此您真正看到的是 stacked line chart .请参阅下面的配置(直接取自您的问题)。

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

查看此 codepen示例。