我有这个图表：
这是用 ChartJS 构建的，但是，在下午 1 点到 5:30 之间，没有数据。
我想要图表做的就是显示没有数据，而不是连接两个点。
这可以做到吗？理论上，我每 5 秒就有一个新值，但这可能会减少，所以我想我需要能够设置连接间隙与显示间隙的容差？
图表选项如下所示：
myChart = new Chart(ctx,
{
type: 'line',
data:
{
labels: timestamp,
datasets:
[{data: speed,backgroundColor: ['rgba(0, 9, 132, 0.2)'],borderColor: ['rgba(0, 0, 192, 1)'],borderWidth: 1},
{data: target,borderColor: "rgba(255,0,0,1)",backgroundColor: "rgba(255,0,0,0)",borderWidth: 1,tooltips: {enabled: false}}]
},
options:
{
scales: {yAxes: [{ticks: {beginAtZero:true, min: 0, max: 300}}], xAxes: [{type: 'time',}]},
elements:
{point:{radius: 0,hitRadius: 5,hoverRadius: 5},
line:{tension: 0}},
legend: {display: false},
pan: {enabled: true,mode: 'xy',rangeMin: {x: null,y: null},rangeMax: {x: null,y: null}},
zoom: {enabled: true,drag: true,mode: 'xy',rangeMin: {x: null,y: null},rangeMax: {x: null,y: null}},
}
});
提前致谢
Using spanGaps您可以控制没有或空数据的点之间折线图的行为：
var timestamp = [],
speed = [10, 100, 20, 30, 40, null, null, null, 100, 40, 60],
target = [20, 30, 40, 10, null, null, null, null, 200, 60, 90];
for (var k = 10; k--; k > 0) {
timestamp.push(new Date().getTime() - 60 * 60 * 1000 * k);
}
var ctx = document.getElementById('chart').getContext("2d");
var data = {
labels: timestamp,
datasets: [{
data: speed,
backgroundColor: ['rgba(0, 9, 132, 0.2)'],
borderColor: ['rgba(0, 0, 192, 1)'],
borderWidth: 1,
spanGaps: false,
},
{
data: target,
borderColor: "rgba(255,0,0,1)",
backgroundColor: "rgba(255,0,0,0)",
borderWidth: 1,
spanGaps: false,
tooltips: {
enabled: false
}
}
]
};
var options = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
min: 0,
max: 300
}
}],
xAxes: [{
type: 'time',
}]
},
elements: {
point: {
radius: 0,
hitRadius: 5,
hoverRadius: 5
},
line: {
tension: 0
}
},
legend: {
display: false
},
pan: {
enabled: true,
mode: 'xy',
rangeMin: {
x: null,
y: null
},
rangeMax: {
x: null,
y: null
}
},
zoom: {
enabled: true,
drag: true,
mode: 'xy',
rangeMin: {
x: null,
y: null
},
rangeMax: {
x: null,
y: null
}
},
};
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="chart"></canvas>作为替代方案，您可以修改数据数组并替换null with zero:
var timestamp = [],
speed = [10, 100, 20, 30, 40, null, null, null, 100, 40, 60],
target = [20, 30, 40, 10, null, null, null, null, 200, 60, 90];
for (var k = 10; k--; k>0) {
timestamp.push(new Date().getTime()-60*60*1000*k);
}
function nullToZero(array) {
return array.map(function(v) {
if (v==null) return 0; else return v;
});
}
var ctx = document.getElementById('chart').getContext("2d");
var data = {
labels: timestamp,
datasets: [{
data: nullToZero(speed),
backgroundColor: ['rgba(0, 9, 132, 0.2)'],
borderColor: ['rgba(0, 0, 192, 1)'],
borderWidth: 1,
},
{
data: nullToZero(target),
borderColor: "rgba(255,0,0,1)",
backgroundColor: "rgba(255,0,0,0)",
borderWidth: 1,
tooltips: {
enabled: false
}
}
]
};
var options = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
min: 0,
max: 300
}
}],
xAxes: [{
type: 'time',
}]
},
elements: {
point: {
radius: 0,
hitRadius: 5,
hoverRadius: 5
},
line: {
tension: 0
}
},
legend: {
display: false
},
pan: {
enabled: true,
mode: 'xy',
rangeMin: {
x: null,
y: null
},
rangeMax: {
x: null,
y: null
}
},
zoom: {
enabled: true,
drag: true,
mode: 'xy',
rangeMin: {
x: null,
y: null
},
rangeMax: {
x: null,
y: null
}
},
};
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="chart"></canvas>