时间戳

首页 > 解决方案 > ChartsJS 获取工具提示的数据/数据集标签的值

javascript - ChartsJS 获取工具提示的数据/数据集标签的值

问题描述

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

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

数据集标签 x.value: X y.value: 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"

最好的问候，大卫

标签： javascriptchartschart.js

解决方案

根据您在上面发布的 sampleData，这是您传递给工具提示的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
};

推荐阅读