Проблема с отображением нескольких графиков CanvasJS на одной странице - PullRequest
Новая
       11

Проблема с отображением нескольких графиков CanvasJS на одной странице

0 голосов
/ 18 октября 2018

У меня есть страница (stats.php), которая вызывает php-страницы, содержащие скрипты canvasjs для рендеринга графиков на них.Я могу получить страницы (top_airlines.php и top_aircraft.php), которые содержат каждую отдельную диаграмму для рендеринга, однако, когда я пытаюсь разместить их на одной странице stats.php, только одна из них будет отображаться.

Он использует JSON, с которым я совсем не знаком, и использую пример, который мне дал их справочная служба пару лет назад.Я попытался изменить код так, чтобы теоретически он загружал диаграмму.Опять же, они будут загружаться на свои независимые страницы, и только когда я пытаюсь собрать их вместе на одной странице, весь код ломается.

Мне любопытно подумать, что, возможно, это связано с кодом javascript для

$ (документ) .ready (function () `

TOP AIRLINES (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 (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, используя следующую информацию, расположенную в определенном месте в статистике.страница php.

1 Ответ

0 голосов
/ 22 октября 2018

Проблема возникает из-за переопределения события window.onload.Изменение его на jQuery ready / load должно нормально работать в вашем случае.Вот пример проекта .

. Вы также можете попробовать способы, предложенные в этом потоке stackoverflow . 

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

PS: dataPoints isжестко запрограммирован в семпле-проекте.

...