【发布时间】：2020-11-11 01:13:31
【问题描述】：
这是我的代码。我在网上研究过，我只能使用一个窗口加载的东西，但我的图表中有一些我无法删除的功能。我试图将图表代码放入一个窗口加载功能，但无济于事。我还尝试将带有 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",
showInLegend: true,
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; ?>
]
},
{
type: "bar",
showInLegend: true,
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", {
animationEnabled: true,
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" ,
includeZero: true,
suffix: " Mins"
},
toolTip: {
shared: true
},
legend: {
cursor: "pointer",
itemclick: toggleDataSeries
},
data: [
{
type: "line",
name: "White Temperatures",
color: "#0d00ff",
showInLegend: true,
axisYIndex: 1,
dataPoints: [<?php echo $white_data; ?>]
},
{
type: "line",
name: "Red Temperatures",
color: "#ff1f1f",
axisYIndex: 0,
showInLegend: true,
dataPoints: [<?php echo $red_data; ?>]
},
{
type: "line",
name: "Clear Temperatures",
color: "#9d00ff",
axisYIndex: 0,
showInLegend: true,
dataPoints: [<?php echo $clear_data; ?>]
},
{
type: "line",
name: "Silver Temperatures",
color: "#bdbdbd",
axisYIndex: 0,
showInLegend: true,
dataPoints: [<?php echo $silver_data; ?>]
},
{
type: "line",
name: "Black Temperatures",
color: "#000000",
axisYIndex: 0,
showInLegend: true,
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>
【问题讨论】：
标签： canvasjs