如何在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 轴上。 顾名思义，对数插值用于确定值在轴上的位置。