Chart.js 2.9.4对数轴标签取消科学计数法问题求助

要解决对数X轴标签显示为科学计数法的问题，同时避免图表消失，需要对以下几个关键部分进行修改：

关键修改点 #

• 移除无效的X轴最小值：对数坐标轴不能设置min: 0（对数函数在0处无定义），这是导致图表消失的核心原因之一，改为数据中的最小值10。
• 编写正确的tick回调函数：将科学计数法格式的tick值转换为常规整数格式，确保显示符合预期。
• 统一数据类型：将数据中X值的字符串类型改为数字类型，避免解析异常。

修改后的完整代码 #

<!DOCTYPE html>
<!-- saved from url=(0014)about:internet -->
<html>
<head>
    <title>Chart</title>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=Edge'>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-colorschemes"></script>
    <style>
        body { margin: 0; padding: 0; }
        #container { width: 100%; }
    </style>
</head>
<body>
<div id='container'>
    <canvas id='myChart'></canvas>
</div>
<script>
    Chart.defaults.global.animation.duration = 1000;
    Chart.defaults.global.animation.easing = 'linear';
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [10, 2000, 30000, 50000, 60000, 700000],
            datasets: [
               {
                label: 'ABC',
                fill: true,
                data: [ 
                  { x: 10, y: 2 },
                  { x: 2000, y: 4 },
                  { x: 30000, y: 7 },
                  { x: 50000, y: 8 },
                  { x: 60000, y: 8.5 },
                  { x: 700000, y: 9 }
                ],
                borderWidth: 1
               },
             ]
        },
        options: {
            aspectRatio:  1.6,
            title: {
                display: true,
                position: 'top',
                text: 'Ref Data'
            },
            legend: {
                display: true,
                position: 'right',
            },
            scales: {
                yAxes: [{
                    id: 'first-y-Axis',
                    display: true,
                    scaleLabel: {
                       display: true,
                       labelString: 'Demo y-axis'
                    }
                }],
                xAxes: [{
                    id: 'first-x-Axis',
                    display: true,
                    type: 'logarithmic',
                    scaleLabel: {
                       display: true,
                       labelString: 'Demo x-axis'
                    },
                    ticks: {
                       min: 10, // 修正为有效最小值
                       max: 700000,
                       callback: function(value) {
                           // 将科学计数法数值转为常规整数格式
                           const num = Number(value);
                           return num.toLocaleString('en-US', { useGrouping: false });
                       }
                    }
                }]
            },
            plugins: {
                colorschemes: {
                    scheme: 'brewer.Paired12'
                }
            }
        }
    });
</script>
</body>
</html>

说明 #

• 回调函数逻辑：toLocaleString('en-US', { useGrouping: false })会将数值转换为不带千位分隔符的常规整数字符串，比如把7e+5转为700000。
• 数据类型统一：将labels和data中的X值改为数字类型，确保Chart.js能正确解析对数轴的刻度。
• 最小值修正：对数轴的最小值必须大于0，设置为数据中的最小X值10，保证坐标轴渲染正常。

内容的提问来源于stack exchange，提问作者Pacman