如何在chart.js中為y軸分配對數刻度？

Question

var data1 = {
        labels: JSON.parse('<?php echo JSON_encode($bioc_months);?>'),
        datasets: [{
                fillColor: "rgba(220,220,220,0.5)",
                strokeColor: "rgba(220,220,220,1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                data: 1000,
                900,
                90,
                200,
                1020
            }, {
                fillColor: "rgba(151,187,205,0.5)",
                strokeColor: "rgba(151,187,205,1)",
                pointColor: "rgba(151,187,205,1)",
                pointStrokeColor: "#fff",
                data: 600,
                456,
                20,
                2,
                900
            ]
        };

        var opt1 = {
            canvasBordersWidth: 3,
            canvasBordersColor: "#205081",
            scaleOverride: true,
            scaleSteps: 6,
            scaleStepWidth: log2,
            scaleStartValue: 0,
            scaleLabel: "<%=value%>",
            legend: true,
            inGraphDataShow: true,
            annotateDisplay: true,
            inGraphDataShow: false,
            annotateDisplay: true,
            animationEasing: "easeOutBounce",
            graphTitleFontSize: 18
        };

        var myBarChart1 = new Chart(ctx1).Bar(data1, opt1);

Answer 1

您可以將對數刻度分配給 y 軸，如下所示：

yAxes: [{
    scaleLabel: {
        display: true,
        labelString: 'LABEL',
    },
    type: 'logarithmic',
    position: 'left',
    ticks: {
         min: 0.1, //minimum tick
         max: 1000, //maximum tick
         callback: function (value, index, values) {
             return Number(value.toString());//pass tick values as a string into Number function
         }
    },
    afterBuildTicks: function (chartObj) { //Build ticks labelling as per your need
        chartObj.ticks = [];
        chartObj.ticks.push(0.1);
        chartObj.ticks.push(1);
        chartObj.ticks.push(10);
        chartObj.ticks.push(100);
        chartObj.ticks.push(1000);
    }
}]

Answer 2

正如@user2722127 指出的，本質是將類型放在"logarithmic" 。

如果你只關心這一點，那么你最終會得到科學格式的笨拙標簽（例如 200000 = "2e5"）。 我個人更喜歡他們多一點人性。 因此，回調方法實際上將numeric數據值轉換為string標簽值。

注意：不會為數據集中的所有值調用回調。 它只會被自動生成的滴答聲調用。 就我而言，這就足夠了。 然而，標簽可能太多。 所以為了限制標簽的數量，我簡單地為所有不需要的標簽值返回null 。

yAxes: [{
    type: 'logarithmic',
    ticks: {
         min: 1,
         max: 1000000,
         callback: function (value, index, values) {
             if (value === 1000000) return "1M";
             if (value === 100000) return "100K";
             if (value === 10000) return "10K";
             if (value === 1000) return "1K";
             if (value === 100) return "100";
             if (value === 10) return "10";
             if (value === 1) return "1";
             return null;
         }
    }
}]

注意：上面的屏幕截圖顯示了一個比例尺為 0 點的圖表。 這其實是不正確的。 正如你在上面的源代碼中看到的那樣，我后來將最小值修改為 1。我不得不這樣做，因為在更高版本的 chart.js 中，圖表實際上是嚴重混亂的，有時會在圖表下方繪制。 這一切都是由於0-tick。 實際上，從數學的角度來看，對數刻度不可能真的有 0 刻度。 因此，例如從 1 或 0.001 開始更有意義。 但不是0。

編輯：

以下不是絕對必要的，但可能會提高性能。

如果您想對創建的刻度進行更多控制，可以提供afterBuildTicks屬性。 （這與@user2722127 的回答中提供的非常相似。）在這個例子中，它只是用不同的刻度替換圖表對象的刻度數組的內容。

  afterBuildTicks = (chartObj) => {
      const ticks = [1, 10, 100, 1000, 10000, 100000, 1000000];
      chartObj.ticks.splice(0, chartObj.ticks.length);
      chartObj.ticks.push(...ticks);
  }

您只需將此函數作為屬性添加到yAxis元素以及其他屬性。

yAxes: [{
    type,
    ticks,
    afterBuildTicks
}]

Answer 3

http://www.chartjs.org/docs/#scales-logarithmic-scale

對數刻度

對數刻度用於繪制數值數據。 它可以放置在 x 或 y 軸上。 顧名思義，對數插值用於確定值在軸上的位置。