如何解决使用CanvasJS图表，使用图表功能时如何在一页上显示2个图表
这是我的代码。香港专业教育学院在线研究，我只能使用一个窗口加载的东西，但我在图表中有无法删除的功能。香港专业教育学院试图把图表代码放在一个窗口onload功能，但无济于事。香港专业教育学院还试图把带有window.onload的图表函数放到两个单独的页面中，并将它们调用到一个PHP页面中，但这是行不通的（出于同样的原因，我假设）。谢谢：）
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("bar",{
animationEnabled: true,title:{
text: "Maximum,Minimum and Average Temperatures for the Hot Cars"
},axisY: {
title: "Temperature (C)",includeZero: true
},legend: {
cursor:"pointer",itemclick : toggleDataSeries
},toolTip: {
shared: true,content: toolTipformatter
},data: [{
type: "bar",showInLegend: true,name: "Maximum",color: "#fc0303",dataPoints: [
<?PHP echo $black_max; ?>,<?PHP echo $white_max; ?>,<?PHP echo $red_max; ?>,<?PHP echo $clear_max; ?>,<?PHP echo $silver_max; ?>
]
},{
type: "bar",name: "Minimum",color: "#0314fc",dataPoints: [
<?PHP echo $black_min; ?>,<?PHP echo $white_min; ?>,<?PHP echo $red_min; ?>,<?PHP echo $clear_min; ?>,<?PHP echo $silver_min; ?>
]
},name: "Average",color: "#b503fc",dataPoints: [
<?PHP echo $black_avg; ?>,<?PHP echo $white_avg; ?>,<?PHP echo $red_avg; ?>,<?PHP echo $clear_avg; ?>,<?PHP echo $silver_avg; ?>
]
}]
});
chart1.render();
function toolTipformatter(e) {
var str = "";
var total = 0 ;
var str3;
var str2 ;
for (var i = 0; i < e.entries.length; i++){
var str1 = "<span style= \"color:"+e.entries[i].dataSeries.color + "\">" + e.entries[i].dataSeries.name + "</span>: <strong>"+ e.entries[i].dataPoint.y + "</strong> <br/>" ;
total = e.entries[i].dataPoint.y + total;
str = str.concat(str1);
}
str2 = "<strong>" + e.entries[0].dataPoint.label + "</strong> <br/>";
str3 = "<span style = \"color:Tomato\">Total: </span><strong>" + total + "</strong><br/>";
return (str2.concat(str)).concat(str3);
}
function toggleDataSeries(e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
}
else {
e.dataSeries.visible = true;
}
chart.render();
}}
window.onload = function () {
var chart = new CanvasJS.Chart("line",zoomEnabled: true,title:{
text: "Hot Cars Temperatures"
},axisY:{
title: "Temperature",lineColor: "#C24642",tickColor: "#C24642",labelFontColor: "#C24642",titleFontColor: "#C24642",includeZero: true,suffix: "C"
},axisX: {
title: "Time",titleFontColor:"#369EAD",lineColor:"#369EAD",tickColor:"#369EAD",labelFontColor:"#369EAD",suffix: " Mins"
},toolTip: {
shared: true
},legend: {
cursor: "pointer",itemclick: toggleDataSeries
},data: [
{
type: "line",name: "White Temperatures",color: "#0d00ff",axisYIndex: 1,dataPoints: [<?PHP echo $white_data; ?>]
},{
type: "line",name: "Red Temperatures",color: "#ff1f1f",axisYIndex: 0,dataPoints: [<?PHP echo $red_data; ?>]
},name: "Clear Temperatures",color: "#9d00ff",dataPoints: [<?PHP echo $clear_data; ?>]
},name: "Silver Temperatures",color: "#bdbdbd",dataPoints: [<?PHP echo $silver_data; ?>]
},name: "Black Temperatures",color: "#000000",dataPoints: [<?PHP echo $black_data; ?>]
}]
});
chart.render();
function toggleDataSeries(e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
e.chart.render();
}}
</script>
</head>
<body>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="line" style="height: 370px; width: 75%;"></div>
<br>
<br>
<br>
<div id="bar" style="height: 370px; width: 75%;"></div>
</body>
</html>
解决方法
window.onload在整个页面加载（包括其内容（图像，CSS，脚本等））时被触发。您可以在window.onload中创建任意数量的图表。请参阅CanvasJS documentation，以获取有关在页面中呈现多个图表的教程。
下面是工作代码。
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var chart1 = new CanvasJS.Chart("bar",{
animationEnabled: true,title:{
text: "Maximum,Minimum and Average Temperatures for the Hot Cars"
},axisY: {
title: "Temperature (C)",includeZero: true
},legend: {
cursor:"pointer",itemclick : toggleDataSeries
},toolTip: {
shared: true,content: toolTipFormatter
},data: [{
type: "bar",showInLegend: true,name: "Maximum",color: "#fc0303",dataPoints: [
<?php echo $black_max; ?>,<?php echo $white_max; ?>,<?php echo $red_max; ?>,<?php echo $clear_max; ?>,<?php echo $silver_max; ?>
]
},{
type: "bar",name: "Minimum",color: "#0314fc",dataPoints: [
<?php echo $black_min; ?>,<?php echo $white_min; ?>,<?php echo $red_min; ?>,<?php echo $clear_min; ?>,<?php echo $silver_min; ?>
]
},name: "Average",color: "#b503fc",dataPoints: [
<?php echo $black_avg; ?>,<?php echo $white_avg; ?>,<?php echo $red_avg; ?>,<?php echo $clear_avg; ?>,<?php echo $silver_avg; ?>
]
}]
});
chart1.render();
var chart2 = new CanvasJS.Chart("line",zoomEnabled: true,title:{
text: "Hot Cars Temperatures"
},axisY:{
title: "Temperature",lineColor: "#C24642",tickColor: "#C24642",labelFontColor: "#C24642",titleFontColor: "#C24642",includeZero: true,suffix: "C"
},axisX: {
title: "Time",titleFontColor:"#369EAD",lineColor:"#369EAD",tickColor:"#369EAD",labelFontColor:"#369EAD",suffix: " Mins"
},toolTip: {
shared: true
},legend: {
cursor: "pointer",itemclick: toggleDataSeries
},data: [
{
type: "line",name: "White Temperatures",color: "#0d00ff",axisYIndex: 1,dataPoints: [<?php echo $white_data; ?>]
},{
type: "line",name: "Red Temperatures",color: "#ff1f1f",axisYIndex: 0,dataPoints: [<?php echo $red_data; ?>]
},name: "Clear Temperatures",color: "#9d00ff",dataPoints: [<?php echo $clear_data; ?>]
},name: "Silver Temperatures",color: "#bdbdbd",dataPoints: [<?php echo $silver_data; ?>]
},name: "Black Temperatures",color: "#000000",dataPoints: [<?php echo $black_data; ?>]
}]
});
chart2.render();
function toolTipFormatter(e) {
var str = "";
var total = 0 ;
var str3;
var str2 ;
for (var i = 0; i < e.entries.length; i++){
var str1 = "<span style= \"color:"+e.entries[i].dataSeries.color + "\">" + e.entries[i].dataSeries.name + "</span>: <strong>"+ e.entries[i].dataPoint.y + "</strong> <br/>" ;
total = e.entries[i].dataPoint.y + total;
str = str.concat(str1);
}
str2 = "<strong>" + e.entries[0].dataPoint.label + "</strong> <br/>";
str3 = "<span style = \"color:Tomato\">Total: </span><strong>" + total + "</strong><br/>";
return (str2.concat(str)).concat(str3);
}
function toggleDataSeries(e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
e.chart.render();
}
}
</script>
</head>
<body>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="line" style="height: 370px; width: 75%;"></div>
<br>
<br>
<br>
<div id="bar" style="height: 370px; width: 75%;"></div>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
