如何在chart.js中，在y轴上将接近值舍入到小数点后一位

v8wbuo2f 于 2023-06-22 发布在 Chart.js

关注(0)|答案(1)|浏览(140)

在这个url当我点击Map上的标记，并隐藏这三个警告（黄色，橙子和红色）我看到的值与小数点后太多的数字。
我怎么能只显示小数后的一个值。

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

chart.js

来源：https://stackoverflow.com/questions/76490075/how-can-i-round-close-values-to-one-decimal-place-on-y-axis-in-chart-js

1条答案

按热度按时间

57hvy0tb1#

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

console.log(0.1 + 0.2)

// would yield a good result: 0.3

// the actual result according to JavaScript: 0.30000000000000004

More information about floating-point stored numbers- StackOverflow应答

使用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/chart.js@4.3.0"></script>
<canvas id="ctx"></canvas>

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

赞(0）回复(0）举报 2023-06-22

我来回答

如何在chart.js中，在y轴上将接近值舍入到小数点后一位

1条答案

相关问题

热门标签

最新问答