Question

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

我正在尝试在Bubblechart中自定义工具提示以适合格式：

数据集标签 x。值：X y.value：X

对于x和y值，我很好。但是我找不到想要的标题。

我正在尝试尝试标题

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

但是这将返回每个Bubble的所有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

根据您上面发布的sampleData，这就是您要传递给data中的工具提示的内容。问题在于，当数组应该为字符串-documentation时，您正在将数组传递给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
};

ChartsJS获取工具提示的“数据/数据集标签”的值

1 个答案: