ChartJs React -如何阻止ChartJs在工具提示中将我的数字四舍五入到3个小数点?

jc3wubiy  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(135)

我的ChartJ折线图中的工具提示出现舍入问题。当我将鼠标悬停在图表上的数据点上时,工具提示显示数据的舍入版本(通常为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;

Screenshot of the tooltip

nx7onnlm

nx7onnlm1#

尝试使用标签回调,它可以修改工具提示文本
将选项更改为

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

  };

相关问题