chart.js - 如何在 Chart.js 中创建自定义对数轴

Question

我正在尝试使用 Chart.js 重构旧的 Flex 应用程序，我想复制这个线性/对数轴。注意 yAxis 上干净的最小间距。

这是我的 Chart.js 代码。

var mtbsoData = [];
        var mtbsoLables = [];

        for (let i = 0; i <= 10; i++) {
            mtbsoData.push(i * i * i * i);
            mtbsoLables.push(i.toString());
        }

        var ctxMtbso = document.getElementById("chartMtbso").getContext('2d');

        var chartMtbso = new Chart(ctxMtbso, {
            type: 'bar',
            data: {
                labels: mtbsoLables,
                datasets: [{
                    label: 'label',
                    data: mtbsoData,
                    backgroundColor: 'rgba(0, 0, 255, .6)',
                    borderColor: 'rgba(0, 0, 255, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                title: {
                    text: 'Title',
                    display: true,
                    fontSize: 24
                },
                scales: {
                    xAxes: [{
                        display: true,
                        ticks: {
                            beginAtZero: true
                        },
                        scaleLabel: {
                            display: true,
                            labelString: 'X Axis'
                        }
                    }],
                    yAxes: [{
                        type: 'logarithmic',
                        ticks: {
                            min: 0,
                            max: 1000,
                            callback: function (value, index, values) {
                                return value + ' years';
                            }
                        },
                        scaleLabel: {
                            display: true,
                            labelString: 'Y Axis'
                        }
                    }]
                },
                tooltips: {
                    callbacks: {
                        label: function (tooltipItem, data) {
                            var label = data.datasets[tooltipItem.datasetIndex].label || '';

                            if (label) {
                                label += ': ';
                            }
                            label += tooltipItem.yLabel.toFixed(2);
                            return label;
                        }
                    }
                },
                legend: {
                    display: false
                }

            }
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>

<canvas id="chartMtbso"></canvas>

这是一个屏幕截图。注意 yAxis 上拥挤的刻度。

从文档看来，您可以应用的唯一刻度属性是“min”和“max”属性。

有人可以提出解决方案吗？

Answer 1

我修好了它。

修改 yAxes 回调，如下所示：

                    yAxes: [{
                    type: 'logarithmic',
                    ticks: {
                        autoSkip: true,
                        min: 0,
                        callback: function (value, index, values) {
                            if( value==10 || value==100 || value==1000 || value==10000 || value==100000  || value==1000000){
                                return value + ' years';
                            }
                        }
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Mean Time Between Stock-Out'
                    }
                }]

然后，如果该值为 10 的幂，则仅返回一个刻度。