【发布时间】：2019-08-12 04:35:13
【问题描述】：
我想使用 Javascript（特别是使用 chart.js 库）创建一个 html 页面并显示动态折线图。
我还想在每次按下“添加图表”按钮时添加一个新图表。
我设法或多或少地做到了所有这些，但有一些问题：
- 当创建新图表时，旧图表会消失，或者说它是模糊的；
- 我不知道如何递归地将新图表与旧图表对齐，以便每个新图表都在旧图表之下，我尝试这样做但没有任何成就；
- 我不太了解
<div> or <canvas>所扮演的角色，而且我认为不可能为每个新图表创建一个新的<div> or <canvas>，因为我不知道会有多少图表显示。
CSS 可以帮助我吗？或者有没有办法以动态的方式划分html页面，以便每次创建新图表时也会为新图表创建html页面的新区域？
这是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/libs/http_cdnjs.cloudflare.com_ajax_libs_moment.js_2.22.2_moment.js"></script>
<script src="node_modules/libs/http_cdnjs.cloudflare.com_ajax_libs_Chart.js_2.7.3_Chart.js"></script>
<script src="node_modules/libs/http_github.com_nagix_chartjs-plugin-streaming_releases_download_v1.7.1_chartjs-plugin-streaming.js"></script>
</head>
<body>
<div id="test">
<canvas id="myChart"></canvas>
</div>
<!-- <div id="test2">
<canvas id="myChart2"></canvas>
</div> -->
<p>
<button id="randomizeData">Randomize Data</button>
<button id="addDataset">Add Dataset</button>
<button id="removeDataset">Remove Dataset</button>
<button id="addData">Add Data</button>
<button id="addChart">Add Chart</button>
</p>
<script>
//import Chart from "chart.js";
var chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)'
};
var color = Chart.helpers.color;
var t=5;
var b=500;
var d=1;
var cont = 0;
var config = {
type: 'line',
data: {
datasets: [{
label: 'Dataset 1 (cubic interpolation)',
backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
borderColor: chartColors.blue,
fill: false,
cubicInterpolationMode: 'monotone',
data: []
}]
},
options: {
title: {
display: true,
text: 'Board Number 0', //var i era 'Board Number X'
},
scales: {
xAxes: [{
type: 'realtime',
realtime: {
duration: 25000, //era 20000
refresh: 1000, //era 1000
delay: 1200, //era 2000
onRefresh: onRefresh
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'value'
}
}]
},
layout: {
padding: {
left: 0,
right: 1000,
top: t, //var t era 5
bottom: b //var b era 500
}
},
id: d, //var d
}
};
function randomScalingFactor() {
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
}
document.getElementById('addChart').addEventListener('click', newChart);
function newChart(){
var ctx2 = document.getElementById('myChart').getContext('2d');
window.myChart = new Chart(ctx2, config);
window.myChart.update();
//alert(config.options.id);
configSet();
//alert(config.options.id);
alert(cont);
return cont = cont +1;
}
function configSet(){
config.options.layout.padding.top = cont*100;
config.options.layout.padding.bottom -= cont*100;
//config.options.layout.padding.right -=200;
//config.options.layout.padding.left += 200;
config.options.id += 1;
config.options.title.text = 'Board Number ' + config.options.id;
//newChart();
}
function onRefresh(chart) {
chart.config.data.datasets.forEach(function(dataset) {
dataset.data.push({
x: Date.now(),
y: randomScalingFactor()
});
});
}
/* window.onload = function() {
var ctx = document.getElementById('myChart').getContext('2d');
window.myChart = new Chart(ctx, config);
};*/
document.getElementById('randomizeData').addEventListener('click', function() {
config.data.datasets.forEach(function(dataset) {
dataset.data.forEach(function(dataObj) {
dataObj.y = randomScalingFactor();
});
});
window.myChart.update();
});
var colorNames = Object.keys(chartColors);
document.getElementById('addDataset').addEventListener('click', function() {
var colorName = colorNames[config.data.datasets.length % colorNames.length];
var newColor = chartColors[colorName];
var newDataset = {
label: 'Dataset ' + (config.data.datasets.length + 1),
backgroundColor: color(newColor).alpha(0.5).rgbString(),
borderColor: newColor,
fill: false,
lineTension: 0,
data: []
};
config.data.datasets.push(newDataset);
window.myChart.update();
});
document.getElementById('removeDataset').addEventListener('click', function() {
config.data.datasets.pop();
window.myChart.update();
});
document.getElementById('addData').addEventListener('click', function() {
onRefresh(window.myChart);
window.myChart.update();
});
</script>
</body>
</html>
【问题讨论】：
标签： javascript html charts