使用圖表中單獨數組的自定義標籤JS

Question

在我的項目中，我使用Chart.JS來顯示折線圖。

現在在圖中的工具提示示出像

日期：2016年1月2日

價格：50個

這些數據從兩個陣列獲得。 但我需要在價格下面再顯示一個數據。因此，提示會像

日期：2016年1月2日

價格：50

店：店鋪名稱

我怎樣才能在Chart JS實現這一目標？或者是否有可能與其他圖表？請幫忙。我的樣本代碼來生成圖形是

var myLineChart = new Chart(ctx, { 
    type: 'line', 
    data: { 
    labels: data.day, 
    datasets: [{ 
     label: 'Price Change', 
     data: data.price, 
     backgroundColor: "rgba(255,255,255,0.4)", 
     borderColor: "rgba(0, 183, 255,0.4)", 
     pointRadius: 5, 
     pointBorderColor: "rgba(255,0,0,0.4)", 
     pointBackgroundColor: "rgba(255,0,0,0.4)", 
    }] 
    }, 
    options: { 
     tooltips: { 
      enabled: true, 
      mode: 'single', 
      callbacks: { 
       label: function(tooltipItems, data) { 
        return 'Price: '+tooltipItems.yLabel; 
       } 
      } 
     } 
    } 
    }); 

在上面的代碼data.price正存儲價格陣列。我需要通過商店詳細信息並在工具提示中顯示它。

Answer 1

您可以將您的工具提示項目存儲在數組中，然後返回，它將顯示在工具提示標籤上。

例如：

callbacks: { 
    label: function(tooltipItem, data) { 
     var firstTooltip = "toolTipsIdx: " + tooltipItem.index; 
     var otherTooltip = "Ylabel value: " + tooltipItem.yLabel; 
     var tooltip = [firstTooltip, otherTooltip]; //storing all the value here 
     return tooltip; //return Array back to function to show out 
    } 
}