我想使用Javascript创建一个html页面（特别是使用chart.js库）并显示动态折线图。 每次按下“添加图表”按钮时，我还想添加一个新图表。 我设法或多或少地做了所有这些，但有一些问题：
<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>
你可以在addChart事件调用之后创建画布，我只是更新你的newChart（）函数并在我的计算机上运行，它可以正常工作。例：
function newChart(){
document.getElementById('test').insertAdjacentHTML("afterend","<div><canvas id='canvas"+cont+"'></canvas></div>");
var can_id="canvas"+cont;
var ctx2 = document.getElementById(can_id).getContext('2d');
window.can_id = new Chart(ctx2, config);
window.can_id.update();
//alert(config.options.id);
configSet();
//alert(config.options.id);
alert(cont);
return cont = cont +1;
}
编辑：我编辑使用'table'。在你的html中我只添加'table'而在JS中我在调用这个函数时添加了所有'tr'。链接：
HTML：
<table id="test">
</table>
JS：
function newChart(){
document.getElementById('test').insertAdjacentHTML("afterend","<tr><td><canvas id='canvas"+cont+"'></canvas></td></tr>");
var can_id="canvas"+cont;
var ctx2 = document.getElementById(can_id).getContext('2d');
window.can_id = new Chart(ctx2, config);
window.can_id.update();
//alert(config.options.id);
configSet();
//alert(config.options.id);
alert(cont);
return cont = cont +1;
}