我想均匀分布我的线的所有点。默认情况下它看起来不错:
如果我用这个函数添加数据,我会得到这个结果:
var myLineChart = new Chart(ctx, config);
function addData(a) {
config.data.labels.push(a);
config.data.datasets.forEach(function(dataset) {
dataset.data.push(a);
});
if (config.data.datasets[0].data.length > 10) {
config.data.datasets[0].data.shift();
}
myLineChart.update();
}
如果我添加更多元素,它就会变得不可读。我已经尝试修复它好几天了,所以帮助会很好:)。您可以在此处查看配置和整个代码:https : //pastebin.com/wrTak2Rx
您的addData
功能中的问题是labels
和data
不同步。当您使用 将数据固定length
为 10 时Array.shift()
,标签正在稳步增长。如果您还保持10labels
的固定值length
,则可以轻松解决此问题。
let index = config.data.datasets[0].data.length;
function addData(a) {
config.data.labels.push('Data ' + ++index);
config.data.datasets.forEach(dataset => dataset.data.push(a));
if (config.data.datasets[0].data.length > 10) {
config.data.labels.shift();
config.data.datasets[0].data.shift();
}
myLineChart.update();
}
请查看以下可运行代码示例。继续按下Add Value按钮,看看会发生什么。
var ctx = document.getElementById('myChart').getContext('2d');
var config = {
type: 'line',
data: {
labels: ['Data 1','Data 2','Data 3','Data 4','Data 5','Data 6','Data 7','Data 8','Data 9','Data 10'],
datasets: [{
label: 'CPU Allocation of all cores',
data: [0,0,0,0,0,0,0,0,0,0],
borderColor: [
'#61559a',
'#61559a',
'#61559a',
'#61559a',
'#61559a',
'#61559a',
'#61559a',
'#61559a',
'#61559a',
'#61559a'
],
borderWidth: 1
}]
},
options: {
scaleOverride : true,
scaleSteps : 10,
scaleStepWidth : 10,
scaleStartValue : 0,
responsive: true,
title: {
display: false
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: false
}],
yAxes: [{
ticks: {
suggestedMin: 0,
suggestedMax: 100,
stepSize: 10,
beginAtZero: true
},
display: true,
scaleLabel: {
display: true,
labelString: 'Percent'
}
}]
}
}
}
var myLineChart = new Chart(ctx, config);
let index = config.data.datasets[0].data.length;
function addData(a) {
config.data.labels.push('Data ' + ++index);
config.data.datasets.forEach(dataset => dataset.data.push(a));
if (config.data.datasets[0].data.length > 10) {
config.data.labels.shift();
config.data.datasets[0].data.shift();
}
myLineChart.update();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<button onClick="addData(Math.floor(Math.random() * (100 + 1)))">Add Value</button>
<canvas id="myChart" height="80"></canvas>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句