Блог

Я пытаюсь передать массив объектов в виде данных в данные графика, включая значение для x и некоторые другие значения, которые будут использоваться в каждой всплывающей подсказке.

В моем массиве данных каждый объект содержит значения для x и value переменных. Я хочу получить доступ к этому value внутри tooltips и, наконец, отобразить значение внутри всплывающей подсказки, которая появляется при наведении курсора мыши на каждый график данных.

Вот мой код:

 var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['2017/06/12', '2017/06/23', '2017/07/12', '2017/07/23', '2017/08/12', '2017/08/23', '2017/09/12'],
    datasets: [{
      label: 'Values',
      data: [{
          y: 12,
          value: 12
        },
        {
          y: 3,
          value: 13
        },
        {
          y: 1,
          value: 15
        },
        {
          y: -3,
          value: 5
        },
        {
          y: 67,
          value: 18
        },
        {
          y: 12,
          value: 11
        },
        {
          y: 13,
          value: 19
        }
      ],
      fill: false,
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 2
    }]
  },
  options: {
    tooltips: {
      // HERE I WANT TO ACCESS VALUE VARIABLE AND DISPLAY IT IN TOOLTIP
    },
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
  

Chart.js В документах всплывающих подсказок есть раздел об обратном вызове метки, в котором показано, как можно указать текст, отображаемый для данной точки данных. Вам необходимо написать функцию, которая поставляется со следующими параметрами:

 tooltips: {
  callbacks: {
    label: function(tooltipItem, data) {
      return '...';
    }
  }
}
  

Раздел интерфейса элемента всплывающей подсказки показывает, через какую информацию передается обратный tooltipItem вызов. Важными из них являются datasetIndex (индекс набора данных, из которого получен элемент) и index (индекс этого элемента данных в наборе данных). Используя их, вы можете получить доступ к нужному элементу внутри data .

Вот очень простой пример доступа y к и value во всплывающей подсказке

Скрипта (с backgroundColor / borderColor удалена, поскольку это вызывает ошибку):

 tooltips: {
  callbacks: {
    label: function(tooltipItem, data) {
      var item = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
      return item.y    ' '   item.value;
    }
  }
}