[英]Do not draw line on condition in ChartJS line chart
当触发条件时,我不想在两个点之间画线。
我正在使用 chartjs 时间线图。
我的条件是当y
值减小时不画线,所以在这个例子中,当它从 7 变为 1 时
{x:3.5*3600, y:7},
Do not draw line between these two points
{x:4*3600, y:1},
可以用chartjs线时间图吗?
var canvas = document.getElementById('myChart'); var config = { "options": { "scales": { "xAxes": [ { "type": 'time', "time": { "unit": 'minute', "unitStepSize": 60, }, "distribution": 'linear', "bounds": 'ticks', "ticks": { "source": 'auto', "autoSkip": true, "stepSize": 10 } } ], }, }, "data": { "labels": ['2016-04-18T00:00:00Z', '2016-04-18T23:59:00Z'], "datasets": [ { "label": "line", "type": "line", "backgroundColor": "#00b", "borderColor": "#00b", //"yAxisID": "axis4", "borderWidth": 1, "fill": false, "data": [ {x:"2016-04-18T01:00:00Z", y:1}, {x:"2016-04-18T04:00:00Z", y:2}, {x:"2016-04-18T06:00:00Z", y:3}, {x:"2016-04-18T08:00:00Z", y:7}, {x:"2016-04-18T10:00:00Z", y:1}, {x:"2016-04-18T14:00:00Z", y:3}, ] }, ] }, }; var myBarChart = Chart.Line(canvas, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.0/Chart.bundle.min.js"></script> <canvas id="myChart" width="400" height="200"></canvas>
更新我试图在这两项之间添加{x:null,y:null}
或null
但我收到此错误
Error: 0 and 1461023970000 are too far apart with stepSize of 60 minute
在我的选择中,我有:
"data": [
{x:"2016-04-18T01:00:00Z", y:1},
{x:"2016-04-18T04:00:00Z", y:2},
{x:"2016-04-18T06:00:00Z", y:3},
{x:"2016-04-18T08:00:00Z", y:7},
{x:null,y:null},
{x:"2016-04-18T10:00:00Z", y:1},
{x:"2016-04-18T14:00:00Z", y:3},
]
...
xAxes: [
{
type: 'time',
time: {
unit: 'minute',
unitStepSize: 60,
parser: function(date) {
return moment(date).toLocaleString();
}
},
distribution: 'linear',
bounds: 'ticks',
ticks: {
source: 'auto',
autoSkip: true,
stepSize: 10
}
}
],
就像 chartjs 认为 null 是一个很大的价值
如 Chart.js 文档(请参阅spanGaps
)中所述,如果spanGaps
为假(默认情况下),则具有NaN
数据的点将在行中创建中断。
所以,诀窍是插入一个空点,就像你试图做的那样。 这个空点必须加时间戳,两个点之间的时间戳定义了行中的“洞”:
"data": [
{x:"2016-04-18T01:00:00Z", y:1},
{x:"2016-04-18T04:00:00Z", y:2},
{x:"2016-04-18T06:00:00Z", y:3},
{x:"2016-04-18T08:00:00Z", y:7},
{x:"2016-04-18T08:00:00Z", y:null}, // or NaN
{x:"2016-04-18T10:00:00Z", y:1},
{x:"2016-04-18T14:00:00Z", y:3},
]
以这个小提琴为例: https://jsfiddle.net/t1s54gdh/
将 y 设置为 null,同时仍定义 x 坐标。
"data": [
{x:"2016-04-18T01:00:00Z", y:1},
{x:"2016-04-18T04:00:00Z", y:2},
{x:"2016-04-18T06:00:00Z", y:3},
{x:"2016-04-18T08:00:00Z", y:7},
{x:"2016-04-18T08:00:01Z", y:null},
{x:"2016-04-18T10:00:00Z", y:1},
{x:"2016-04-18T14:00:00Z", y:3},
]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.