在圖表js 2中顯示錯誤信息

Question

我嘗試使用圖表顯示example1和example2數據2.當我創建圖表時，它的工作良好並顯示圖形。但當我懸停在圖上指出它顯示正確的信息，但圖顯示錯誤的信息。

其顯示這樣

在上面的截圖Y軸

告訴我但點懸停顯示 如何解決這個問題呢？

這是代碼

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」的數據集是10，而不是6在y軸是因爲你已經配置好線圖如何。

您已將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

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

<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>