如何在 chartjs 中绘制高精度数字

Question

我的数据的数字精度约为0.000001，

让我们取一些介于 0.01 和 0.02 之间的演示值，

比如

[0.010001
,0.011111
,0.012222
,0.013333
,0.014444
,0.015555
,0.016666
,0.017777
,0.018888
,0.019999
];

当我用这些数据集绘图时，然后悬停在任意点，所有这些工具提示的精度仅为 0.001，看起来所有值都有运行 with (original-data).toFixed(3),

但我想展示真正的原始价值，或更精确，如 0.000001

有没有办法在 chartjs 中设置浮点精度？

Answer 1

您可以调整标签回调，这样您就可以 return 原始值而不是 chart.js 的解析值，如下所示：

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [0.010005, 0.011111, 0.012222, 0.013333, 0.014444, 0.015555, 0.016666, 0.017777, 0.019888, 0.019999],
      borderColor: 'pink'
    }]
  },
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          label: (ctx) => (`${ctx.dataset.label}: ${ctx.raw}`)
        }
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>

如何在 chartjs 中绘制高精度数字

How to draw High-Precision-Numbers in chartjs

javascript

chart.js