ツールチップがchart.jsで動作しません。何か案は？

ツールチップがチャートに表示されません。なぜ見えますか？ツールチップがchart.jsで動作しません。何か案は？

<body> 
<canvas id="myChart" width="600" height="400"></canvas> 
<script> 
    var ctx = document.getElementById('myChart').getContext('2d'); 
    var myChart = new Chart(ctx, { 
     type: 'line', 
     data: { 
      // labels: ['m', 'tu', 'w', 'th', 'f', 'sa', 'su'], 
      labels: [{% for item in labels %} 
        "{{item}}", 
        {% endfor %}], 
      datasets: [ 
       { 
        data : [{% for item in values %} 
           {{item}}, 
          {% endfor %}], 
        backgroundColor: 
        [ 
         "#2ecc71","#3498db","#95a5a6","#6dc066","#daa520", 
         "#9b59b6","#f1c40f","#e74c3c","#34495e","#008080", 
         "#ffc0cb","#d3ffce","#ff7373","#ffa500","#e6e6fa", 
         "#003366","#20b2aa","#c6e2ff","#008000" 
        ] 
       } 
      ] 
     }, 
     options: { 
      responsive : true, 
      showTooltips: true, 
      scales: { 
       yAxes: [ 
        { 
         stacked: false 
        } 
       ], 
       xAxes: [ 
        { 
         ticks: { 
          autoSkip: true, 
          maxTicksLimit: 20 
         } 
        } 
       ] 
      } 
     } 
    }); 
</script>

<head> 
<meta charset="utf-8" /> 
<title>Chart.js Example</title> 
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js'></script>

はここで、チャートの写真（一番上が少し切り落としている）です。他のすべてがうまくいきます。ラベルとデータは、私が実行しているpythonスクリプトから供給され、期待される結果を出しています。私はうまくいかないツールチップだけです。

ありがとうございました！

出典

2017-04-24 RIP.Ben.Franklin

ない100％確かに、それはあなたのデータセットから欠落している "ラベル" オプションに起因する可能性があります。データセット内にラベルを追加して、修正されているかどうかを確認してください。 –

私の問題は、共有された 'config'変数によって引き起こされました：https://stackoverflow.com/a/47519851/722036 –

問題はbackgroundColor配列で発生しています。複数の色を使用することはできません配列は、折れ線グラフの単一のデータセットです。代わりに個々の色を使用してください。

var ctx = document.getElementById('myChart').getContext('2d'); 
 
var myChart = new Chart(ctx, { 
 
    type: 'line', 
 
    data: { 
 
     labels: ['m', 'tu', 'w', 'th', 'f', 'sa', 'su'], 
 
     datasets: [{ 
 
      data: [12, 23, 43, 34, 53, 47, 36], 
 
      backgroundColor: '#3498db' 
 
     }] 
 
    }, 
 
    options: { 
 
     responsive: true, 
 
     showTooltips: true, 
 
     scales: { 
 
      yAxes: [{ 
 
       stacked: false 
 
      }], 
 
      xAxes: [{ 
 
       ticks: { 
 
        autoSkip: true, 
 
        maxTicksLimit: 20 
 
       } 
 
      }] 
 
     } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
 
<canvas id="myChart" width="600" height="400"></canvas>

出典

2017-04-24 19:54:51

それはそれでした！完璧！ –

ツールチップがchart.jsで動作しません。何か案は？

答えて

関連する問題