Keine Tooltips auf Diagramm JS Liniendiagramm

Question

Ich muss etwas offensichtliches fehlen, aber ich kann Tooltips nicht erhalten, um an diesem Diagramm Liniendiagramm zu arbeiten. Muss ich sie irgendwie tunen?

Chart.defaults.global.defaultFontColor = '#FFF'; 

      var ctx = document.getElementById("myChart"); 
      var myChart = new Chart(ctx, { 
       type: 'line', 
       data: { 
        // labels: chartdata.labels, 
        // datasets: dataset 
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
     datasets: [{ 
      label: '# of Votes', 
      data: [12, 19, 3, 5, 2, 3], 
      backgroundColor: [ 
       'rgba(255, 99, 132, 0.2)', 
       'rgba(54, 162, 235, 0.2)', 
       'rgba(255, 206, 86, 0.2)', 
       'rgba(75, 192, 192, 0.2)', 
       'rgba(153, 102, 255, 0.2)', 
       'rgba(255, 159, 64, 0.2)' 
      ], 
      borderColor: [ 
       'rgba(255,99,132,1)', 
       'rgba(54, 162, 235, 1)', 
       'rgba(255, 206, 86, 1)', 
       'rgba(75, 192, 192, 1)', 
       'rgba(153, 102, 255, 1)', 
       'rgba(255, 159, 64, 1)' 
      ], 
      borderWidth: 1 
     }] 
       }, 
       options: { 
          scales: { 
           yAxes: [{ 
            ticks: { 
             beginAtZero:true 
            } 
           }] 
          }, 
          title: { 
           display: true, 
           text: 'Custom Chart Title' 
          }, 
          legend: { 
           display:false, 
          }, 
          tooltips: { 
        mode: 'label', 


         }, 
       hover: { 
        mode: 'label' 
       }, 
       } 

      }); 

Answer 1

In Chart.js, Array von Farben für die backgroundColor und borderColor Eigenschaften sind für stabförmige Diagramme zum Beispiel, weil Sie verschiedene Elemente in Ihrem Diagramm (mehrere Balken) haben.

Im Linientyp haben Sie nur ein Element (die Zeile mit der Füllung unten), daher müssen Sie diese Eigenschaften mit einer einzigen Farbe festlegen.

---

Wenn Sie diese Eigenschaften zu ändern:

datasets: [{ 
    label: '# of Votes', 
    data: [12, 19, 3, 5, 2, 3], 
    backgroundColor: 'rgba(255, 99, 132, 0.2)', 
    borderColor: 'rgba(255,99,132,1)', 
    borderWidth: 1 
}] 

Sie das folgende Ergebnis erhalten, die Sie at this fiddle überprüfen: