Chart.jsv2轴中最小值和最大值的滴答

Question

在Chart.js v2中，如何设置一个轴，使其始终显示数据集中最小值和最大值的刻度？该功能可能在配置选项中的某个地方，但它肯定不明显。我甚至尝试过使用插件将文本写入canvas对象，但是当我获得新数据时，可用API挂钩之外的一些东西会重新绘制位图。

下面是最新的配置，当用户导航到一个新的时间时，它由一个函数返回:

return {
    defaults: {
        global: {
            elements: {
                point: {
                    backgroundColor: 'transparent',
                    borderColor: 'transparent',
                    borderWidth: 1,
                }
            },
            line: {
                borderColor: 'rgba(0,0,0,0)',
                borderWidth: 1,
                lineTension: 0.1
            }
        }
    },
    type: 'line',
    responsive: true,
    data: {datasets: this.chartData},
    colors: [],
    labels: [],
    plugins: [
        // These are diagnostic checks for writing to canvas;
        // they fire and work on page load, but once data is loaded they vanish and never re-appear.
        // todo: find out what keeps resetting the chart's canvas tag AFTER the API hooks are done.
        {afterDraw: function (chart, options) {
            console.log('afterDraw');
            if (chart.chartArea === undefined) { return; }
            chart.ctx.fillText('afterDraw', chart.chartArea.left, chart.chartArea.bottom + 30);
        }}
        // Similar additions with the same job have been omitted; no sense in repeating them
    ],
    options: {
        animation: false,
        hover: {
            animationDuration: 0
        },
        responsiveAnimationDuration: 0,
        layout: {
            padding: {
                left: 10,
                right: 10,
                top: 10,
                bottom: 0
            }
        },
        legend: {
            display: false,
            position: 'bottom',
            labels: {
                boxWidth: 80,
                fontColor: 'black'
            }
        },
        maintainAspectRatio: false,
        scales: {
            ticks: {
                autoSkip: false,
                major: {
                    enabled: false
                },
                min: moment(TimeSpan.fromMidnightOf(this.timeSpan.startMs)),
                max: moment(TimeSpan.toMidnightOf(this.timeSpan.startMs)),
                source: 'data'
            },
            xAxes: [{
                gridLines: {
                    display: false,
                    color: 'black'
                },
                scaleLabel: {
                    display: true,
                    labelString: 'Time',
                    fontColor: 'black'
                },
                type: 'time',
                ticks: {
                    padding: -5,
                    suggestedMin: moment(TimeSpan.fromMidnightOf(this.timeSpan.startMs)),
                    suggestedMax: moment(TimeSpan.toMidnightOf(this.timeSpan.startMs))
                },
                time: {
                    displayFormats: {
                        // Overwriting the formats with a string value here
                        'hour': this.getFormatForTimeSpan(),
                        'day': this.getFormatForTimeSpan(),
                        'week': this.getFormatForTimeSpan(),
                        'month': this.getFormatForTimeSpan(),
                        'year': this.getFormatForTimeSpan(),
                    },
                    max: moment(TimeSpan.toMidnightOf(this.timeSpan.startMs)),
                    min: moment(TimeSpan.fromMidnightOf(this.timeSpan.startMs)),
                    unit: this.timeSpan.getTimeSpanUnit(),
                    unitStepSize: 1
                }
            }],
            yAxes: [{
                gridLines: {
                    color: 'black',
                    display: false
                },
                scaleLabel: {
                    display: true,
                    labelString: 'Average Reading',
                    fontColor: 'black'
                },
                ticks: {
                    beginAtZero: true
                }
            }]
        },
        scaleShowValues: true,
        tooltips: {
            position: 'nearest',
            mode: 'index',
            intersect: false,
        },
    }
};

如果有人能指出配置中的任何缺陷，我很想听听他们有什么话要说......

Answer 1

来自文档：www.chartjs.org/docs/latest/axes/

可以使用缩放服务轻松更改比例的默认配置。您需要做的就是传入一个部分配置，该配置将与当前比例默认配置合并以形成新的默认配置。

例如，要为所有线性刻度设置最小值0，您可以执行以下操作。在此时间之后创建的任何线性刻度现在的最小值为0。

Chart.scaleService.updateScaleDefaults（'线性'，{

ticks: {

    min: 0

}

});