使用图表js版本3，如何将自定义数据添加到外部工具提示？

Question

使用 Chart JS 版本 3。如何传入外部工具提示可以使用的自定义数据？

我想用 HTML 重新创建此工具提示。

我正在遵循本页上的示例“#External (Custom) Tooltips”： https: //www.chartjs.org/docs/latest/configuration/tooltip.html，但我需要其他数据来构建工具提示，例如图像网址或产品 ID？我如何将其放入模型中？

Answer 1

您可以将任何自定义/高级数据放入数据集，例如（imgUrls、productIds、imgDataset）：

var chartdata = {
            labels: ["Swimming", "Golf", "Soccer"],
    datasets: [{
        label: "Choices",
        data: [4, 10, 6],
        backgroundColor: ["#a19828", "#b15928", "#fb9a99"],
        imgDataUrls:['img1','img2','img3'],
        imgDataSet:'imgDataset',
        productIds:['id1','id2','id3'],
    }]
};

然后您可以使用 Tooltip Item Context 中的 datasetIndex、dataIndex 来获取自定义/高级数据。

// Index of the dataset the item comes from
datasetIndex: number,

    // Index of this data item in the dataset
dataIndex: number,

https://github.com/chartjs/Chart.js/blob/master/docs/samples/tooltip/html.md