chart.js 不允许使用对数刻度的 y 轴步进答案

【问题标题】：chart.js not allowing y axis steps with logarithmic scalechart.js 不允许使用对数刻度的 y 轴步进
【发布时间】：2017-12-20 01:45:51
【问题描述】：

我必须解析科学记数法，这是对我的图表实施对数刻度的结果，但它会打印出图表中每一行的每个值。似乎没有任何步骤方法有效。

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

【问题讨论】：

标签： javascript chart.js

【解决方案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 + ' %';
                    }
                }
            },
        }
    });

【讨论】：

【解决方案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 可以调整以使刻度更密集/更不密集。

【讨论】：