chart. js 2.0 всегда отображать некоторые подсказки в линейном графике с React. js - PullRequest
0 голосов
/ 12 февраля 2020

Я пытаюсь отобразить только одно значение всплывающей подсказки (выбранная подсказка идет от родительского компонента в качестве реквизита). Любая помощь будет оценена. Пожалуйста, обратитесь к следующему коду. Подсказка, которая должна отображаться, должна передаваться из реквизита selectedValue.

Я использую диаграмму. js 2.9, React. js

drawChart = () => {
    const { dataJson, label, xAxisLabelMinWidth, tooltipBGColor, LineColor, tooltifontColor,selectedValue } = this.props;

    const data=dataJson ? dataJson.map(a => a.data) : [];

    const myChart = new Chart(document.getElementById('chart').getContext('2d'), {
      type: 'line',
      data: {
        labels: dataJson ? dataJson.map(a => a.label) : [],
        datasets: [
          {
            label: label,
            data: data,
            fill: false,
            hoverBackgroundColor:LineColor,
            pointHoverBackgroundColor:LineColor,
            backgroundColor:LineColor,
            borderColor: LineColor
          }
        ]
      },
      options: {
        responsive: true,
        tooltips: {
          yPadding: 15,
          xPadding: 15,
          yAlign: 'bottom',
          titleFontSize: 0,
          backgroundColor: tooltipBGColor,
          bodyFontColor: tooltifontColor,
          displayColors: false,
          position: 'nearest',
          callbacks: {
            label: function (tooltipItem, data) {
              return tooltipItem.yLabel + 'GB';
            },
          },      
        },
        maintainAspectRatio: false,
        legend: {
          display: false,
        },
        scales: {
          xAxes: [{
            gridLines: {
              color: "rgba(0, 0, 0, 0)",
              display: false,
              drawBorder: true
            }
          }],
          yAxes: [{
            gridLines: {
              color: "rgba(0, 0, 0, 0)",
              display: false,
              drawBorder: true
            }
          }]
        }
      }
    });

  }
...