如何使用chart.js在點懸停中顯示多個值

我想知道如果可以在chart.js中的點懸停上顯示更多值。如何使用chart.js在點懸停中顯示多個值

看一看這個fiddle。這是一個從chart.js網站獲取的smiple圖形示例。如果我將鼠標懸停在某個點上，它將顯示數據集的值。

我如何顯示其他值。像這個陣列一樣。

[65, 59, 80, 81, 56, 55, 40]

，如果我想將此數組值 [1, 2, 3, 4, 5, 6, 7]。就像我想顯示編號一樣。這只是一個例子，實際上我想顯示更多的兩個值，但不想將它繪製在僅顯示在點上的圖上。就像在65上一樣，它說明它是第1個值。

任何形式的幫助將不勝感激。

來源

2017-03-16 tech_geek

有可能的話，請用提示選項如下

var ctx = document.getElementById('chart1').getContext("2d"); 
 
    var data = { 
 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
 
    datasets: [ 
 
     { 
 
      label: "My First dataset", 
 
      fill: false, 
 
      lineTension: 0.1, 
 
      backgroundColor: "rgba(75,192,192,0.4)", 
 
      borderColor: "rgba(75,192,192,1)", 
 
      borderCapStyle: 'butt', 
 
      borderDash: [], 
 
      borderDashOffset: 0.0, 
 
      borderJoinStyle: 'miter', 
 
      pointBorderColor: "rgba(75,192,192,1)", 
 
      pointBackgroundColor: "#fff", 
 
      pointBorderWidth: 1, 
 
      pointHoverRadius: 5, 
 
      pointHoverBackgroundColor: "rgba(75,192,192,1)", 
 
      pointHoverBorderColor: "rgba(220,220,220,1)", 
 
      pointHoverBorderWidth: 2, 
 
      pointRadius: 1, 
 
      pointHitRadius: 10, 
 
      data: [65, 59, 80, 81, 56, 55, 40], 
 
      spanGaps: false, 
 
     } 
 
    ] 
 
}; 
 

 

 

 
var options = { 
 
     responsive: true, 
 
     title: { 
 
      display: true, 
 
      position: "top", 
 
      text: 'anything', 
 
      fontSize: 18, 
 
      fontColor: "#111" 
 
     }, 
 
     tooltips: { 
 
       enabled: true, 
 
       mode: 'single', 
 
       callbacks: { 
 
        label: function(tooltipItems, data) { 
 
         var multistringText = [tooltipItems.yLabel]; 
 
          multistringText.push('Another Item'); 
 
          multistringText.push(tooltipItems.index+1); 
 
          multistringText.push('One more Item'); 
 
         return multistringText; 
 
        } 
 
       } 
 
      }, 
 
     legend: { 
 
      display: true, 
 
      position: "bottom", 
 
      labels: { 
 
       fontColor: "#333", 
 
       fontSize: 16 
 
      } 
 
     }, 
 
     scales:{ 
 
      yAxes:[{ 
 
       ticks:{ 
 
        min:0 
 

 
       } 
 
      }] 
 

 
     } 
 
    }; 
 
var myLineChart = new Chart(ctx, { 
 
    type: 'line', 
 
    data: data, 
 
    options: options 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script> 
 
<canvas id="chart1"></canvas>

來源

2017-03-16 16:31:38

這是一個acutally追加一行到每一個tootltip。你有沒有看到第一個工具提示就顯示65我喜歡這樣展示。在同一個工具提示下，它應該顯示1，然後在下一個顯示2 –

更新我的答案。希望這會有所幫助。雖然它取決於你邏輯你想要顯示。如果您有回調句柄，您可以顯示任何內容。 –

是否有可能在數據數組值這樣的下一行？也如果我有3到4個更多的東西要顯示 –

如果你想顯示現有項目下的數據在提示你可以使用3種不同的工具提示footer回調。只需定義你希望顯示爲不在chart.js範圍之外的數組，並使用索引來引用它。

tooltips: { 
    enabled: true, 
    mode: 'single', 
    callbacks: { 
     beforeFooter: function(tooltipItems, data) { 
      return 'Point #: ' + footerLine1[tooltipItems[0].index]; 
     }, 
     footer: function(tooltipItems, data) { 
      return 'Other Data: ' + footerLine2[tooltipItems[0].index]; 
     } 
    } 
},

請記住，你只有3線，（例如3頁腳回調）工作

見的例子here。

來源

2017-03-16 16:50:50 jordanwillis

我明白這一點，但這本身就是一個我們添加索引的函數。如果我有2個這樣的數組[1,2,3,4,5,6]和[4,5,6,9,3,7]，我想在這個工具提示中顯示這個，我希望你能理解我在問什麼 –

我明白你的意思，看我更新的答案。 – jordanwillis

是的，這是很好的。 plz告訴我.index自動索引給他的數組？ –

如何使用chart.js在點懸停中顯示多個值

回答

相關問題