我想使用 Javascript 创建一个 html 页面(特别是使用 Chart.js 库)并显示动态折线图。
我还想在每次按下“添加图表”按钮时添加一个新图表。
我或多或少设法完成了所有这些工作,但存在一些问题:
- 当创建新图表时,旧图表就会消失,或者更好地说它是模糊的;
- 我不知道如何递归地将新图表与旧图表对齐,以便每个新图表都位于旧图表下方,我尝试这样做,但没有任何伟大的成就;
- 我不太理解
<div> or <canvas>
所扮演的 Angular 色,而且我认为不可能创建一个新的<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 事件调用后创建 Canvas ,我只需更新您的 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;
}
编辑:我编辑使用“表”。 在您的 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;
}
关于javascript - 使用chart.js 实现多个动态折线图 | js和html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55278452/