自定义 ChartJS 悬停数据格式

问题描述

我有以下图表：

使用此代码获得的内容：

import React,{Component} from 'react';
import { Line } from 'react-chartjs-2';

const data = {
  labels: ['January','February','march','April','May','June','July'],datasets: [
    {
      label: 'First ',fill: false,lineTension: 0.1,backgroundColor: 'rgba(75,192,0.4)',borderColor: 'rgba(75,1)',borderCapStyle: 'butt',borderDash: [],borderDashOffset: 0.0,borderJoinStyle: 'miter',pointBorderColor: 'rgba(75,pointBackgroundColor: '#fff',pointBorderWidth: 1,pointHoverRadius: 5,pointHoverBackgroundColor: 'rgba(75,pointHoverBorderColor: 'rgba(220,220,pointHoverBorderWidth: 2,poinTradius: 1,pointHiTradius: 10,data: [65,59,80,81,56,55,40]
    }
  ]
};

const options = {
  tooltips: {
      callbacks: {
          label: function(tooltipItem,data) {
              var label = data.datasets[tooltipItem.datasetIndex].label || '';

              if (label) {
                  label += '-->';
              }
              return [2,4,1,5,3];
          }
      }
  }
}

export default class LineDemo extends Component {
  render() {
    return (
      <div>
        <h2>Line Example</h2>
        <Line ref="chart" data={data}  options={options}/>
      </div>
    );
  }
}

我的问题是我想在点悬停时添加一些数据。我有一个这样的额外数组：[2,3] 代表对象的年龄，我也希望在我悬停在一个点上时看到这个。

请查看下面的图片以获得更好的解释。

我浏览了 chartjs documentation，但似乎找不到解释。 任何帮助将不胜感激！

解决方法

您可能正在寻找这样的功能：

var chart = new Chart(ctx,{
    type: 'line',data: data,options: {
        tooltips: {
            callbacks: {
                label: function(tooltipItem,data) {
                    var label = data.datasets[tooltipItem.datasetIndex].label || '';

                    if (label) {
                        label += ': ';
                    }
                    label += Math.round(tooltipItem.yLabel * 100) / 100;
                    return label;
                }
            }
        }
    }
});

此功能在 the official doc 中有详细列出和描述。你可能只是忽略了它。请看：
Label Callback · Tooltip · Chart.js

标签回调可以更改为给定数据点显示的文本。四舍五入数据值的常见示例；以下示例将数据四舍五入到两位小数。
_{（见上面的代码块）}

Frohes Neues！

编辑：

您可以传递图表选项，就像您可以将数据传递给 React 的 ChartJS 一样。
它看起来像这样：<Line ref="chart" data={data} options={options} />。

有关更多信息，请参阅：How to set options in react-chartjs-2?

,

您需要传递类似此示例的工具提示选项：https://codesandbox.io/s/cool-feather-85xfi?file=/src/App.js:2175-2213，然后在 bodyLines.forEach(function (body,i) 中自定义您的工具提示