在Chart.js v2中,如何设置轴以便始终显示数据集中最小值和最大值的刻度?该功能可能在配置选项中的某个位置,但它肯定不明显。我甚至尝试使用插件将文本写入画布对象,但是当我获得新数据时,可用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,
},
}
};
如果有人能指出配置中的任何缺陷,我很乐意听到他们要说的话......
答案 0 :(得分:0)
摘自文档:https://www.chartjs.org/docs/latest/axes/
可以使用秤服务轻松更改秤的默认配置。您需要做的就是传递部分配置,该配置将与当前秤的默认配置合并以形成新的默认设置。
例如,要为所有线性刻度设置最小值0,则应执行以下操作。在此时间之后创建的任何线性比例尺现在至少应为0。
Chart.scaleService.updateScaleDefaults('linear',{
ticks: {
min: 0
}
});