chart.js 2.0始终使用React.js在折线图中显示一些工具提示

时间:2020-02-12 08:46:39

标签: javascript reactjs chart.js chart.js2 chartjs-2.6.0

我试图仅显示一个工具提示值(“ Selected”工具提示来自父组件作为prop)。任何帮助,将不胜感激。 请参考以下代码。 应该显示的工具提示必须从prop'selectedValue'传递。

我正在使用chart.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
            }
          }]
        }
      }
    });

  }

0 个答案:

没有答案
相关问题