chart js 2で間違った情報を表示します。

Question

chart1を使ってexample1とexample2のデータを表示しようとしています。グラフのポイントにカーソルを合わせると正しい情報が表示されますが、グラフに間違った情報が表示されます。この問題を解決するための方法を

上のスクリーンショットの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

を確認してください理由は、あなたがあなたの折れ線グラフが構成されている方法です。

積み重ねる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

データ作成では、問題を引き起こしています。 「例2」という名前のデータセットは、y軸上の10の代わりに、6である理由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>