如何将图表.js 中 y 轴上的收盘值四舍五入到一位小数

Question

在这个url当我点击地图上的标记并隐藏这三个警告（黄色、橙色和红色）时，我看到小数点后数字太多的值。

如何只显示小数点后一个值。

    const a = new Chart(canvasElement, {
    data: {
      labels: mikeFWLabelChart,
      datasets: [{
        type: 'line',
        label: 'водно количество [куб. м./сек.]',
        data: mikeFWDataChart,
        pointRadius: 1,
        borderWidth: 2,
        borderColor: '#00b3ff',
        backgroundColor: "#00b3ff",
        pointBackgroundColor: "#00b3ff",
        pointBorderColor: "rgba(255, 255, 255, 0)",
        pointHoverBackgroundColor: "#00b3ff",
        pointHoverBorderColor: "#00b3ff",
        showToolTips: false,
      }, {
        type: 'line',
        label: 'надморска височина [метри]',
        data: mike11DataChart,
        pointRadius: 1,
        borderWidth: 2,
        borderColor: '#86A3B8',
        backgroundColor: "#86A3B8",
        pointBackgroundColor: "#86A3B8",
        pointBorderColor: "rgba(255, 255, 255, 0)",
        pointHoverBackgroundColor: "#86A3B8",
        pointHoverBorderColor: "#0022ff",
        showToolTips: false,
      }, {
        type: 'line',
        label: 'предупреждение I',
        data: mikeYellowWarning,
        pointRadius: 1,
        borderWidth: 3,
        borderColor: '#eeff00',
        backgroundColor: "#eeff00",
        pointBackgroundColor: "#eeff00",
        pointBorderColor: "rgba(255, 255, 255, 0)",
        pointHoverBackgroundColor: "#eeff00",
        pointHoverBorderColor: "#eeff00",
        showToolTips: false,
      }, {
        type: 'line',
        label: 'предупреждение II',
        data: mikeOrangeWarning,
        pointRadius: 1,
        borderWidth: 3,
        borderColor: '#ff8400',
        backgroundColor: "#ff8400",
        pointBackgroundColor: "#ff8400",
        pointBorderColor: "rgba(255, 255, 255, 0)",
        pointHoverBackgroundColor: "#ff8400",
        pointHoverBorderColor: "#ff8400",
        showToolTips: false,
      }, {
        type: 'line',
        label: 'предупреждение III',
        data: mikeRedWarning,
        pointRadius: 1,
        borderWidth: 3,
        borderColor: '#ff0000',
        backgroundColor: "#ff0000",
        pointBackgroundColor: "#ff0000",
        pointBorderColor: "rgba(255, 255, 255, 0)",
        pointHoverBackgroundColor: "#ff0000",
        pointHoverBorderColor: "#ff0000",
        showToolTips: false,
      },]
    },
    options: {

        responsive: true,
        maintainAspectRatio: false,
        plugins: {
        annotation: {
        annotations: [
                          {
                            type: "line",
                            xMin: vert_line_darprog,
                            xMax: vert_line_darprog,
                            borderColor: "#8a9c9d",
                            label: {
                              backgroundColor: 'rgba(0,0,0,0)',
                              color: '#8a9c9d',
                              padding: 2,
                              content: 'Дата на прогнозата (GMT+2)',
                              enabled: true,
                              display: true,
                              position: 'end',
                              textAlign: 'center',
                              xAdjust: -9,
                              rotation: 270
                            }
                          },
                          {
                            type: "line",
                            xMin: vert_line_GMT2,
                            xMax: vert_line_GMT2,
                            borderColor: "#aab7b8",
                            label: {
                              backgroundColor: 'rgba(0,0,0,0)',
                              color: '#aab7b8',
                              padding: 2,
                              content: 'Актуален час в момента (GMT+2)',
                              enabled: true,
                              display: true,
                              position: 'end',
                              textAlign: 'center',
                              xAdjust: 9,
                              rotation: 270
                            }
                          }
                        ]
        }
        },
      scales: {
        x: {
          ticks: {
              maxRotation: 90,
              minRotation: 90, 
              
          }
      }, y: {
        ticks: {
           
        }
    }
      }
    }
  })
};

当前面的数字相同而小数点后的数字不同时，则得出的数字过多。例如：

200.2000000000005 200.2000000000003

Answer 1

由于 JavaScript 的浮点存储，您有太多的分数变成了大十进制数。

console.log(0.1 + 0.2)

// would yield a good result: 0.3

// the actual result according to JavaScript: 0.30000000000000004

• 有关浮点存储数字的更多信息 - StackOverflow Answer

使用

Math.round()

或

.toFixed()

功能可以提供解决方案。因此，您需要操纵 Y 轴上显示的值。

要操纵 Y 轴值，请使用

callback

属性。

const chart = new Chart(ctx, {
  options: {
    scales: {
      y: {
        ticks: {
          autoSkip: true,
          // Mannipulate value by function
          callback: function (value, index, values) {
            return value.toFixed(2); // Get rounding to 2 decimal places
          },
        },
      },
    },
  },
})

const chart = new Chart(ctx, {
  type: "line",
  data: {
    labels: ["First", "Second", "Third"],
    datasets: [
      {
        type: "line",
        label: "водно количество [куб. м./сек.]",
        data: [0.1241221424, 1.213213213123, 3.4354353453],
        pointRadius: 1,
        borderWidth: 2,
        borderColor: "#00b3ff",
        backgroundColor: "#00b3ff",
        pointBackgroundColor: "#00b3ff",
        pointBorderColor: "rgba(255, 255, 255, 0)",
        pointHoverBackgroundColor: "#00b3ff",
        pointHoverBorderColor: "#00b3ff",
        showToolTips: false,
      },
      {
        type: "line",
        label: "надморска височина [метри]",
        data: [3.53453453, 2.3123215322352, 0.3213215423535],
        pointRadius: 1,
        borderWidth: 2,
        borderColor: "#86A3B8",
        backgroundColor: "#86A3B8",
        pointBackgroundColor: "#86A3B8",
        pointBorderColor: "rgba(255, 255, 255, 0)",
        pointHoverBackgroundColor: "#86A3B8",
        pointHoverBorderColor: "#0022ff",
        showToolTips: false,
      },
      {
        type: "line",
        label: "предупреждение I",
        data: [5.324125345345, 1.32131232145151, 6.321321514134],
        pointRadius: 1,
        borderWidth: 3,
        borderColor: "#eeff00",
        backgroundColor: "#eeff00",
        pointBackgroundColor: "#eeff00",
        pointBorderColor: "rgba(255, 255, 255, 0)",
        pointHoverBackgroundColor: "#eeff00",
        pointHoverBorderColor: "#eeff00",
        showToolTips: false,
      },
      {
        type: "line",
        label: "предупреждение II",
        data: [2.21342142141, 0.234325326, 1.32142352512],
        pointRadius: 1,
        borderWidth: 3,
        borderColor: "#ff8400",
        backgroundColor: "#ff8400",
        pointBackgroundColor: "#ff8400",
        pointBorderColor: "rgba(255, 255, 255, 0)",
        pointHoverBackgroundColor: "#ff8400",
        pointHoverBorderColor: "#ff8400",
        showToolTips: false,
      },
      {
        type: "line",
        label: "предупреждение III",
        data: [50.234235231, 10.2141251125, 20.324235236],
        pointRadius: 1,
        borderWidth: 3,
        borderColor: "#ff0000",
        backgroundColor: "#ff0000",
        pointBackgroundColor: "#ff0000",
        pointBorderColor: "rgba(255, 255, 255, 0)",
        pointHoverBackgroundColor: "#ff0000",
        pointHoverBorderColor: "#ff0000",
        showToolTips: false,
      },
    ],
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      annotation: {
        annotations: [
          {
            type: "line",
            xMin: "First",
            xMax: "Third",
            borderColor: "#8a9c9d",
            label: {
              backgroundColor: "rgba(0,0,0,0)",
              color: "#8a9c9d",
              padding: 2,
              content: "Дата на прогнозата (GMT+2)",
              enabled: true,
              display: true,
              position: "end",
              textAlign: "center",
              xAdjust: -9,
              rotation: 270,
            },
          },
          {
            type: "line",
            xMin: "First",
            xMax: "Third",
            borderColor: "#aab7b8",
            label: {
              backgroundColor: "rgba(0,0,0,0)",
              color: "#aab7b8",
              padding: 2,
              content: "Актуален час в момента (GMT+2)",
              enabled: true,
              display: true,
              position: "end",
              textAlign: "center",
              xAdjust: 9,
              rotation: 270,
            },
          },
        ],
      },
    },
    scales: {
      x: {
        ticks: {
          maxRotation: 90,
          minRotation: 90,
        },
      },
      y: {
        ticks: {
          autoSkip: true,
          // Mannipulate value by function
          callback: function (value, index, values) {
            return value.toFixed(2); // Get rounding to 2 decimal places
          },
        },
      },
    },
  },
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<canvas id="ctx"></canvas>

• 轴属性 - options.scales[].ticks.callback - Chart.js 文档
  
• 轴属性 - 自定义刻度 - Chart.js 文档