图表JS获取工具提示的数据/数据集标签的值

Question

我对ChartJS（以及一般的JS）非常陌生，在网上任何地方都找不到适合我的问题的答案。

我正在尝试自定义气泡图中的工具提示以适应格式：

数据集标签x.值：Xy.值：X

对于 x 和 y 值，我很好。但我无法得到我想要的标题。

对于标题，我正在尝试

            tooltips: {
        callbacks: {
            title: function(tooltipItems, data) {
                    return data.datasets[tooltipItems[0].datasetIndex].label;
                }               
            }               
        }

但这会返回每个气泡的所有标签的整个数组。我想这是由于我填充标签的方式。

    data = {
 labels: LabelArray,
 datasets: [{
   label: LabelArray,
       data: chartData
   }]};

我在数据和数据集下有标签，因为它不适用于数据集下的标签。

非常感谢有关如何

解决此问题的任何信息！

我的数组的示例数据：

    chartData: 
    0: Object { x: "2786", y: "12.4", r: "15.32" }
    1: Object { x: "4998", y: "23.7", r: "52.46" }​
    2: Object { x: "719", y: "20.4", r: "6.5" }​ 
    3: Object { x: "3649", y: "15.9", r: "25.73" }
    LabelArray: 
    0: "A"​ 
    1: "B"​ 
    2: "C"​ 
    3: "D"

此致敬意大卫

Answer 1

根据您在上面发布的示例数据，这是您在 data 中传递给工具提示的内容。问题是你正在传递一个数组，当它应该是一个字符串时label - 文档。

data = {
    labels: ["A", "B", "C", "D"],
    datasets: [
        {
        label: ["A", "B", "C", "D"],
        data: [
                { x: "2786", y: "12.4", r: "15.32" }​,
                { x: "4998", y: "23.7", r: "52.46" }​,
                { x: "719", y: "20.4", r: "6.5" }​,
                { x: "3649", y: "15.9", r: "25.73" }
            ]
      }
  ]
};

如果您尝试传递具有不同标签的多个数据点，则需要将datasets分解为这样的对象数组。

data = {
    datasets: [
      {
        label: "A",
        data: [{ x: "2786", y: "12.4", r: "15.32" }​]
      },
      {
        label: "B",
        data: [{ x: "4998", y: "23.7", r: "52.46" }​]
      },
      {
        label: "C",
        data: [{ x: "719", y: "20.4", r: "6.5" }​]
      },
      {
        label: "D",
        data: [{ x: "3649", y: "15.9", r: "25.73" }]
      }
  ]
};

如果必须将标签保存到数组中，则需要在构建图表数据时提取所需的标签。这样的事情应该有效...

dynamicData =[
  { x: "2786", y: "12.4", r: "15.32" }​,
  { x: "4998", y: "23.7", r: "52.46" }​
];
labelArray = ["A","B","C","D"];
parsedData = [];
for(let i = 0; i < dynamicData.length; i++) {
    parsedData.push({
      label: labelArray[i],
      data: [dynamicData[i]]
    });
}
data = {
    datasets: parsedData
};