ChartJs React - 如何阻止 ChartJs 在工具提示上将我的数字四舍五入到小数点后 3 位？

Question

我的 ChartJs 折线图中的工具提示存在舍入问题。 当我在图表上的数据点上进行 hover 时，工具提示会显示我的数据的四舍五入版本（通常为 3 个小数点，如果有尾随 0，则更少）。 有没有办法停止工具提示中的自动舍入并显示完整数字？

这是我的代码和问题的屏幕截图。

const LineChart = () => {

    const [dataForChart, setDataForChart]=useState<any[]>([1.0023, 1.0231, 1.0347412, 1.03541, 1.0434, 1.04001, 1.0459])
    const [labelsForChart, setlabelsForChart]=useState<any[]>(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July'])
    
    const options = {
        responsive: true,
        plugins: {
          legend: {
            display:false
          },
          title: {
            display: true,
            text: 'Price',
          },
        },

      };
      
      const data = {
        labels: labelsForChart,
        datasets: [
          {
            label: 'Price',
            data: dataForChart,
            borderColor: 'green',
            backgroundColor: 'green',
          },
        ],
      };


    return (
        <div>
          <Line options={options} data={data} />
        </div>
    );
};

export default LineChart;

工具提示的屏幕截图

Answer 1

尝试使用 label 回调它可以修改您的工具提示文本

将您的选项更改为

  const options = {
    responsive: true,
    plugins: {
      legend: {
        display:false
      },
      title: {
        display: true,
        text: 'Price',
      },
      tooltip: {
        callbacks: {
          label: function(context) {
            return context.dataset.label;
          }
        } 
      }
    },

  };