Javascript 在一个页面上呈现多个画布图表时出现问题
我有一个页面stats.php,它调用包含canvasjs脚本的php页面,以便在这些页面上呈现图表。我可以得到top_airlines.php和top_airlines.php页面,这些页面包含要呈现的每个图表,但是,当我尝试在单个stats.php页面上获取它们时,实际上只有一个会呈现 它使用JSON,我对JSON一点也不熟悉,我正在使用他们的帮助台几年前给我的示例。我试图修改代码,使其在理论上能够加载图表。同样,它们会加载到各自独立的页面上,只是当我试图在单个页面上调用它们时,所有代码都会丢失 我很好奇地想,也许它与 $document.readyfunction` TOP AIRLINES TOP_AIRLINES.phpJavascript 在一个页面上呈现多个画布图表时出现问题,javascript,php,canvasjs,Javascript,Php,Canvasjs,我有一个页面stats.php,它调用包含canvasjs脚本的php页面,以便在这些页面上呈现图表。我可以得到top_airlines.php和top_airlines.php页面,这些页面包含要呈现的每个图表,但是,当我尝试在单个stats.php页面上获取它们时,实际上只有一个会呈现 它使用JSON,我对JSON一点也不熟悉,我正在使用他们的帮助台几年前给我的示例。我试图修改代码,使其在理论上能够加载图表。同样,它们会加载到各自独立的页面上,只是当我试图在单个页面上调用它们时,所有代码都会
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js”></script>
<script src=”http://globe-trekking.com/vg/includes/js/jquery.canvasjs.min.js”></script>
<script type=”text/javascript”>
window.onload = function () {
CanvasJS.addColorSet(“blueShades2”,
[//colorSet Array
“#074b83”,
“#085a9d”,
“#0a69b7”,
“#0b78d1”,
“#0c87eb”,
“#2196f3”,
“#4daaf6”,
“#79bff8”,
“#a6d4fa”,
“#d2eafd”
]);
$(document).ready(function () {
$.getJSON(“http://globe-trekking.com/vg/charts/top_airlines_data.php”, function (result) {
var chartAirlines = new CanvasJS.Chart(“top_10_airlines_chart”, {
animationEnabled: false,
colorSet: “blueShades2”,
toolTip:{content: “{name}”},
data: [
{
type: “bar”,
indexLabelFontSize: 22,
dataPoints: result
}
]
});
chartAirlines.render();
});
});
}
</script>
<div id=”top_10_airlines_chart” style=”width: 100%; height: 300px;”></div>
TOP AIRCRAFT TOP_AIRCRAFT.php
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js”></script>
<script src=”http://globe-trekking.com/vg/includes/js/jquery.canvasjs.min.js”></script>
<script type=”text/javascript”>
window.onload = function () {
CanvasJS.addColorSet(“blueShades”,
[//colorSet Array
“#074b83”,
“#085a9d”,
“#0a69b7”,
“#0b78d1”,
“#0c87eb”,
“#2196f3”,
“#4daaf6”,
“#79bff8”,
“#a6d4fa”,
“#d2eafd”
]);
$(document).ready(function () {
$.getJSON(“http://globe-trekking.com/vg/charts/top_aircraft_data.php”, function (result) {
var chartAircraft = new CanvasJS.Chart(“top_10_airplanes_chart”, {
animationEnabled: false,
colorSet: “blueShades”,
toolTip:{content: “{name}”},
data: [
{
type: “bar”,
indexLabelFontSize: 22,
dataPoints: result
}
]
});
chartAircraft.render();
});
});
}
</script>
<div id=”top_10_airplanes_chart” style=”width: 100%; height: 300px;”></div>
我在stats.php页面上使用位于stats.php页面特定位置的以下命令调用它们 该问题似乎是由于覆盖window.onload事件而发生的。在您的情况下,将其更改为jqueryready/load应该可以正常工作。这是你的电话号码 您也可以尝试本文中建议的方法
备注:数据点在示例项目中是硬编码的。使用chartjs库,非常易于使用。您也可以在一页上添加多个图表。谢谢。我用了一段时间,但不喜欢这些款式。
$(document).ready(function () {
CanvasJS.addColorSet(“blueShades”,
[//colorSet Array
“#074b83”,
“#085a9d”,
“#0a69b7”,
“#0b78d1”,
“#0c87eb”,
“#2196f3”,
“#4daaf6”,
“#79bff8”,
“#a6d4fa”,
“#d2eafd”
]);
});