问题在一页上渲染多个 CanvasJS 图表答案

【问题标题】：Problem Rendering Multiple CanvasJS charts on one page问题在一页上渲染多个 CanvasJS 图表
【发布时间】：2018-10-18 18:58:10
【问题描述】：

我有一个页面 (stats.php)，它调用包含 canvasjs 脚本的 php 页面以在其上呈现图表。我可以获取包含要呈现的每个单独图表的页面（top_airlines.php 和 top_aircraft.php），但是，当我尝试在单个 stats.php 页面上获取它们时，只有其中一个会实际呈现。

它使用 JSON，我完全不熟悉它，并且正在使用几年前他们的服务台给我的示例。我试图修改代码，以便理论上它应该加载图表。同样，它们将加载到它们的独立页面上，只是当我尝试在一个页面上同时调用它们时，所有代码都会中断。

我很好奇地认为这可能与

的 javascript 代码有关

$(document).ready(function()`

顶级航空公司 (top_airlines.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(“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.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 页面上某个位置的以下内容。

【问题讨论】：

使用chartjs库，非常好用。您也可以在一页上添加多个图表。
谢谢。我用了一段时间，但不喜欢这些样式。

标签： javascript php canvasjs

【解决方案1】：

该问题似乎是由于覆盖了 window.onload 事件而发生的。将其更改为 jQuery ready / load 在您的情况下应该可以正常工作。这是sample project。

您也可以尝试stackoverflow thread 中建议的方法。

$(document).ready(function () {
    CanvasJS.addColorSet(“blueShades”,
    [//colorSet Array
        “#074b83”,
        “#085a9d”,
        “#0a69b7”,
        “#0b78d1”,
        “#0c87eb”,
        “#2196f3”,
        “#4daaf6”,
        “#79bff8”,
        “#a6d4fa”,
        “#d2eafd”
    ]);
});

PS：数据点在示例项目中是硬编码的。

【讨论】：