ChartsJS получает значение метки набора данных / данных для всплывающей подсказки - PullRequest
Новая
       12

ChartsJS получает значение метки набора данных / данных для всплывающей подсказки

0 голосов
/ 14 января 2019

Я очень плохо знаком с ChartJS (и JS в целом) и нигде не могу найти подходящий ответ на мою проблему.

Я пытаюсь настроить всплывающие подсказки в моем Bubblechart для соответствия формату:

Метка набора данных x.value: X значение y: 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"

С уважением, David

1 Ответ

0 голосов
/ 14 января 2019

Основываясь на примере данных, которые вы разместили выше, это то, что вы передаете всплывающей подсказке в 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
};
...