chart.js not allowing y axis steps with logarithmic scale

问题

I had to parse the scientific notation that was a result of implementing logarithmic scale to my graph but it printed out each value for each line in the graph. No method of steps seems to be working.

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);
                        }
                    }
                }]
            }
        }
    });

回答1:

I figured it out, here's what I did in case any one else needs it:

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 + ' %';
                    }
                }
            },
        }
    });

回答2:

In my case, the y-axis values were not known ahead of time, so I used this in my options object:

(using underscore/lodash)

{
  ...

  ticks: {
    beginAtZero: true,
    min: 0,
    callback: function(tick, index, ticks){
      return tick.toLocaleString();
    },
  },
  afterBuildTicks: function(chart){
    var maxTicks = 20;
    var maxLog = Math.log(chart.ticks[0]);
    var minLogDensity = maxLog / maxTicks;

    var ticks = [];
    var currLog = -Infinity;
    _.each(chart.ticks.reverse(), function(tick){
      var log = Math.max(0, Math.log(tick));
      if (log - currLog > minLogDensity){
        ticks.push(tick);
        currLog = log;
      }
    });
    chart.ticks = ticks;
  }

  ...
}

maxTicks can be adjusted to make the ticks more/less dense.

来源：https://stackoverflow.com/questions/40183188/chart-js-not-allowing-y-axis-steps-with-logarithmic-scale