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

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

对数比例

对数刻度用于绘制数值数据。它可以放置   在x轴或y轴上。顾名思义，对数   插值用于确定值在轴上的位置。

Answer 2

您可以将对数刻度分配给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 3

正如@ user2722127所指出的，本质是将类型放在"logarithmic"上。

如果您仅注意这一点，那么您将得到科学格式的笨拙标签（例如200000 =“ 2e5”）。我个人更喜欢他们更人性化。因此，回调方法实际上将numeric数据值转换为string标签值。

注意：不会为数据集中的所有值调用回调。自动生成的报价会被调用。就我而言，这就足够了。但是，标签可能过多。因此，为了限制标签的数量，我只需为所有不需要的标签值返回null。

yAxes: [{
    type: 'logarithmic',
    ticks: {
         min: 0,
         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 === 0) return "0";
             return null;
         }
    }
}]

如何在chart.js中为y轴指定对数刻度？

3 个答案: