Question

在我的项目中，我使用Chart.JS来显示折线图。

现在图表中的工具提示显示为

日期：01/02/2016

价格：50

这些数据来自两个数组。 但我需要在价格之下再显示一个数据。所以工具提示就像

日期：01/02/2016

价格：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
    }
}

在Chart JS中使用单独数组的自定义标签

1 个答案: