javascript - chart.js不允许以对数刻度显示y轴步长

我必须解析科学符号，这是对图形实现对数刻度的结果，但是它却打印出图形中每条线的每个值。似乎没有采取任何步骤的方法。

RESULTING CHART IMG

var packetsElement = $("#packetsGraph");
    pckBarChart = new Chart(packetsElement, {
        type: 'bar',
        data: {
            labels: ["Received", "Errors", "Lost"],
            datasets: [{
                label: '# of Packets',
                data: packetsArr,
                backgroundColor: [
                    'rgba(55,102,245,0.3)',
                    'rgba(55,102,245,0.2)',
                    'rgba(55,102,245,0.1)'
                ],
                borderColor: [
                    '#3766F5',
                    '#3766F5',
                    '#3766F5'],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            title: {
                display: true,
                text: 'Packets',
                fontSize: 20
            },
            scales: {
                yAxes: [{
                    type: 'logarithmic',
                    ticks: {
                        min: 1,
                        stepSize: 1000000,
                        steps: 1000000,
                        stepValue: 1000000,
                        callback: function(value, index, values) {
                            return parseFloat(value);
                        }
                    }
                }]
            }
        }
    });

最佳答案

我想通了，如果其他人需要它，我会做以下事情:

var packetsElement = $("#packetsGraph");
    pckBarChart = new Chart(packetsElement, {
        type: 'bar',
        data: {
            labels: ["Received", "Errors", "Lost"],
            datasets: [{
                label: '% of Packets (Logarithmic)',
                data: packetsArr,
                backgroundColor: [
                    'rgba(55,102,245,0.3)',
                    'rgba(55,102,245,0.2)',
                    'rgba(55,102,245,0.1)'
                ],
                borderColor: [
                    '#3766F5',
                    '#3766F5',
                    '#3766F5'],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            title: {
                display: true,
                text: 'Packets',
                fontSize: 20
            },
            scales: {
                yAxes: [{
                    type: 'logarithmic',
                    ticks: {
                        min: 0,
                        max: 100,
                        callback: function(value, index, values) {//needed to change the scientific notation results from using logarithmic scale
                            return Number(value.toString());//pass tick values as a string into Number function
                        }
                    },
                    afterBuildTicks: function(pckBarChart) {
                        pckBarChart.ticks = [];
                        pckBarChart.ticks.push(0);
                        pckBarChart.ticks.push(25);
                        pckBarChart.ticks.push(50);
                        pckBarChart.ticks.push(75);
                        pckBarChart.ticks.push(100);
                      }
                }]
            },
            tooltips: {
                enabled: true,
                mode: 'single',
                callbacks: {
                    label: function(tooltipItems, data) {
                        return tooltipItems.yLabel + ' %';
                    }
                }
            },
        }
    });