问题描述
如何在 chartjs 2.0 中隐藏越过 x 轴的值?您会注意到图表超出 -60 标记.x 轴使用时间刻度,我设置了最大值和最小值.
这是我的图表配置:
{类型":线",数据":{数据集":[{"label":"散点数据集",数据":[{"x":"2016-09-16T16:36:53Z",y":88.46153846153845},...{"x":"2016-09-16T16:37:54Z",y":88.3076923076923}],点半径":0,"backgroundColor":"rgba(0,0,255,0.5)","borderColor":"rgba(0,0,255,0.7)"}]},选项":{标题":{显示":真,"text":"过去 60 秒的水位"},动画":假,秤":{x轴":[{类型":时间",位置":底部",显示":真,时间":{最大":2016-09-16T16:37:54Z",分钟":2016-09-16T16:36:54.000Z",单位":秒",单位步长":5},滴答声":{回调:函数(值,索引,值){返回 "-" + (60 - 5 * 索引);}}}],y轴":[{显示":真,滴答声":{}}]},传奇":{显示":假}}}
你可以使用
... 将给出以下结果:
How do I hide values past the x-axis in chartjs 2.0? You will notice the chart juts past the -60 mark. The x-axis uses a time scale and I have the max and min values set.
Here's my chart configuration:
{
"type":"line",
"data":{
"datasets":[
{
"label":"Scatter Dataset",
"data":[
{
"x":"2016-09-16T16:36:53Z",
"y":88.46153846153845
},
...
{
"x":"2016-09-16T16:37:54Z",
"y":88.3076923076923
}
],
"pointRadius":0,
"backgroundColor":"rgba(0,0,255,0.5)",
"borderColor":"rgba(0,0,255,0.7)"
}
]
},
"options":{
"title":{
"display":true,
"text":"Water Level Over Last 60 Seconds"
},
"animation":false,
"scales":{
"xAxes":[
{
"type":"time",
"position":"bottom",
"display":true,
"time":{
"max":"2016-09-16T16:37:54Z",
"min":"2016-09-16T16:36:54.000Z",
"unit":"second",
"unitStepSize":5
},
"ticks":{
callback: function(value, index, values) {
return "-" + (60 - 5 * index);
}
}
}
],
"yAxes":[
{
"display":true,
"ticks":{
}
}
]
},
"legend":{
"display":false
}
}
}
You can achieve this using Chart.js plugins. They let you handle events occuring while creating, updating or drawing the chart.
Here, you'll need to affect before the chart is initialised :
// We first create the plugin
var cleanOutPlugin = {
// We affect the `beforeInit` event
beforeInit: function(chart) {
// Replace `ticks.min` by `time.min` if it is a time-type chart
var min = chart.config.options.scales.xAxes[0].ticks.min;
// Same here with `ticks.max`
var max = chart.config.options.scales.xAxes[0].ticks.max;
var ticks = chart.config.data.labels;
var idxMin = ticks.indexOf(min);
var idxMax = ticks.indexOf(max);
// If one of the indexes doesn't exist, it is going to bug
// So we better stop the program until it goes further
if (idxMin == -1 || idxMax == -1)
return;
var data = chart.config.data.datasets[0].data;
// We remove the data and the labels that shouldn't be on the graph
data.splice(idxMax + 1, ticks.length - idxMax);
data.splice(0, idxMin);
ticks.splice(idxMax + 1, ticks.length - idxMax);
ticks.splice(0, idxMin);
}
};
// We now register the plugin to the chart's plugin service to activate it
Chart.pluginService.register(cleanOutPlugin);
The plugin is basically a loop through the data to remove the values that shouldn't be displayed.
You can see this plugin working in a live example on jsFiddle.
For instance, the following chat with a min set to 2
and a max to 6
...
... would give the following result :
这篇关于如何在 chartjs 2.0 中隐藏 x 轴之后的值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!