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示例。

Answer 2

数据创建导致问题。查看fiddle

＆＃13;

var lables = [];
var 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,function(i,item){
      $.each(item.example1,function(i,j){
             lables.push(i);
             example1.push(j);
      });
      $.each(item.example2,function(i,j){
           example2.push(j);
      });   
    });
    var ctx = document.getElementById('chartdata');
    var myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: lables,
        datasets: [{
            label: 'Example 1',
            fill: false,
            lineTension: 0.1,
            backgroundColor: '#00a3d0',
            borderColor: '#00a3d0',
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: '#00a3d0',
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: '#00a3d0',
            pointHoverBorderColor: '#00a3d0',
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: example1,
            spanGaps: false,
        }, {
            label: 'Example 2',
            fill: false,
            lineTension: 0.1,
            backgroundColor: '#8a6d3b',
            borderColor: '#8a6d3b',
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: '#8a6d3b',
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: '#8a6d3b',
            pointHoverBorderColor: '#8a6d3b',
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: example2,
            spanGaps: false,
        }
        ]
      },
      options: {
        responsive: true,
        scales: {
        yAxes: [{
            stacked: false,
            ticks: {
                min: 0,
                stepSize: 5,
            }
        }]
        }
    }
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script>
<canvas id="chartdata" ></canvas>

＆＃13;

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

2 个答案: