使用图表中单独数组的自定义标签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 
    } 
}