chart.js不允許y軸以對數刻度的步驟

Question

我不得不分析科學記數法，這是對我的圖形實現對數比例的結果，但是它會爲圖形中的每一行輸出每個值。沒有任何步驟的方法似乎正在工作。

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

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可以調整，以使蜱更多/更少密集。