工具提示在chart.js中不起作用。有任何想法嗎？

工具提示未顯示在我的圖表中。你能明白爲什麼嗎？工具提示在chart.js中不起作用。有任何想法嗎？

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

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

這裏的圖表的照片（頂部被切掉一點點）。其他一切工作正常。標籤和數據來源於我正在運行的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中不起作用。有任何想法嗎？

回答

相關問題