chart.js不允许y轴步长采用对数刻度

Question

我不得不解析为对应图形实现对数比例的结果的科学记数法，但它打印出图表中每一行的每个值。 没有任何步骤方法似乎有效。

导致图表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);
                        }
                    }
                }]
            }
        }
    });

Answer 1

我想出来了，这就是我做过的事，万一其他人需要它：

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

Answer 2

在我的例子中，y轴值未提前知道，所以我在我的选项对象中使用了它：

（使用下划线/ 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以使得刻度更多/更少密集。