Question

我有一个页面（stats.php），该页面调用包含canvas.js脚本以在其上绘制图表的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页面上调用它们。

Answer 1

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

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

  function test_fn(val) {
    document.getElementById("loading").style.display = "block";
    document.getElementById("test_value").value = val;
    $.ajax({
      url: "test.php",
      type: "POST",
      data: $('#test_fid').serialize(),
      cache: false,
      success: function(data) {
        $('#myplace_test').html(data);
        document.getElementById("loading").style.display = "none";
      }
    });
  }

PS：dataPoints在示例项目中被硬编码。

在一页上呈现多个CanvasJS图表时出现问题

1 个答案: