JavaScript — Попытка получить несколько диаграмм Google на одной странице, не повезло
Я проводил некоторые исследования стекового потока, но, похоже, не могу точно определить мою проблему. Этот код работал немного, но перестал работать почти так же быстро. Я пытаюсь получить 3 диаграммы Google, чтобы показать на одной странице. Что-то не так с кодом?
Вот оно ниже
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {
'packages': ['line', 'corechart']
});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
var chart0 = document.getElementById('curve_chart0');
var data0 = new google.visualization.DataTable();
data0.addColumn('string', '');
data0.addColumn('number', 'Altitude');
data0.addColumn('number', 'Speed');
data0.addRows([
['05:22:57', 6519, 0],
['05:24:00', 6519, 0],
['05:24:57', 6519, 0],
['05:25:57', 6519, 0],
['05:26:57', 6519, 0],
['05:27:58', 6519, 0],
['05:28:57', 6519, 0],
['05:29:58', 6519, 0],
['05:30:58', 6519, 0],
['05:31:58', 6519, 11],
['05:32:58', 6519, 0],
['05:33:58', 6519, 11]
]);
var options0 = {
chart: {
},
legend: {
position: 'none'
},
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {
axis: 'Altitude'
},
1: {
axis: 'Speed'
}
},
width: 400,
height: 150,
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Altitude: {
label: 'Altitude'
},
Speed: {
label: 'Speed'
}
}
}
};
chart0 = new google.charts.Line(document.getElementById('curve_chart0'));
chart0.draw(data0, options0);
var chart1 = document.getElementById('curve_chart1');
var data1 = new google.visualization.DataTable();
data1.addColumn('string', '');
data1.addColumn('number', 'Altitude');
data1.addColumn('number', 'Speed');
data1.addRows([
['05:39:58', 116, 0],
['05:40:58', 116, 0],
['05:41:58', 116, 0],
['05:42:58', 116, 0],
['05:43:58', 116, 0],
['05:44:59', 116, 1],
['05:45:59', 116, 0],
['05:46:59', 116, 0],
['05:47:59', 116, 0],
['05:48:59', 116, 33],
['05:49:59', 116, 19],
['05:50:59', 116, 21],
['05:51:59', 116, 7],
['05:52:59', 116, 85],
['05:53:59', 3019, 196]
]);
var options1 = {
chart: {
},
legend: {
position: 'none'
},
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {
axis: 'Altitude'
},
1: {
axis: 'Speed'
}
},
width: 400,
height: 150,
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Altitude: {
label: 'Altitude'
},
Speed: {
label: 'Speed'
}
}
}
};
chart1 = new google.charts.Line(document.getElementById('curve_chart1'));
chart1.draw(data1, options1);
var chart2 = document.getElementById('curve_chart2');
var data2 = new google.visualization.DataTable();
data2.addColumn('string', '');
data2.addColumn('number', 'Altitude');
data2.addColumn('number', 'Speed');
data2.addRows([
['23:58:54', 30, 0],
['23:59:54', 30, 0],
['00:00:54', 30, 1],
['00:01:54', 30, 1],
['00:02:54', 30, 0],
['00:03:54', 30, 0],
['00:04:54', 30, 0],
['00:05:54', 30, 13],
['00:06:54', 30, 17],
['00:07:54', 30, 21],
['00:08:54', 30, 5],
['00:09:55', 316, 178],
['00:10:55', 3770, 209],
['00:11:55', 6308, 241]
]);
var options2 = {
chart: {
},
legend: {
position: 'none'
},
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {
axis: 'Altitude'
},
1: {
axis: 'Speed'
}
},
width: 400,
height: 150,
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Altitude: {
label: 'Altitude'
},
Speed: {
label: 'Speed'
}
}
}
};
chart2 = new google.charts.Line(document.getElementById('curve_chart2'));
chart2.draw(data2, options2);
}
</script>
</head>
<body>
<!--Divs that will hold the charts-->
<div id="curve_chart0"></div>
<div id="curve_chart1"></div>
<div id="curve_chart2"></div>
</body>
</html>
Решение
Следующее отображается как вы хотите, хотя он использует классические графики.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', {
'packages': ['line', 'corechart']
});
google.setOnLoadCallback(drawChart);
function graph(div,data)
{
var data0 = new google.visualization.DataTable();
data0.addColumn('string', '');
data0.addColumn('number', 'Altitude');
data0.addColumn('number', 'Speed');
data0.addRows(data);
var options = {
chart: {
},
legend: {
position: 'none'
},
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {targetAxisIndex: 0},
1: {targetAxisIndex: 1}
},
width: 400,
height: 150,
vAxes: {
// Adds labels to each axis; they don't have to match the axis names.
0: {title: 'Altitude'},
1: {title: 'Speed'}
}
};
var chart0 = new google.visualization.LineChart(document.getElementById(div));
chart0.draw(data0, options);
}
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
graph('curve_chart0',[
['05:22:57', 6519, 0],
['05:24:00', 6519, 0],
['05:24:57', 6519, 0],
['05:25:57', 6519, 0],
['05:26:57', 6519, 0],
['05:27:58', 6519, 0],
['05:28:57', 6519, 0],
['05:29:58', 6519, 0],
['05:30:58', 6519, 0],
['05:31:58', 6519, 11],
['05:32:58', 6519, 0],
['05:33:58', 6519, 11]
]);
graph('curve_chart1',[
['05:39:58', 116, 0],
['05:40:58', 116, 0],
['05:41:58', 116, 0],
['05:42:58', 116, 0],
['05:43:58', 116, 0],
['05:44:59', 116, 1],
['05:45:59', 116, 0],
['05:46:59', 116, 0],
['05:47:59', 116, 0],
['05:48:59', 116, 33],
['05:49:59', 116, 19],
['05:50:59', 116, 21],
['05:51:59', 116, 7],
['05:52:59', 116, 85],
['05:53:59', 3019, 196]
]);
graph('curve_chart2',[
['23:58:54', 30, 0],
['23:59:54', 30, 0],
['00:00:54', 30, 1],
['00:01:54', 30, 1],
['00:02:54', 30, 0],
['00:03:54', 30, 0],
['00:04:54', 30, 0],
['00:05:54', 30, 13],
['00:06:54', 30, 17],
['00:07:54', 30, 21],
['00:08:54', 30, 5],
['00:09:55', 316, 178],
['00:10:55', 3770, 209],
['00:11:55', 6308, 241]
]);
}
</script>
</head>
<body>
<!--Divs that will hold the charts-->
<div id="curve_chart0"></div>
<div id="curve_chart1"></div>
<div id="curve_chart2"></div>
</body>
</html>Другие решения
Попробуйте это работает: —
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', { packages: ['line'] });
google.setOnLoadCallback(drawCharts);
function drawPageViews(chartReady) {
var data = new google.visualization.DataTable();
var div2 = document.getElementById("div2");
var labels = ['m', 'n', 'o', 'p', 'q', 'r', 's'];
data.addColumn('string', 'Day');
data.addColumn('number', 'PageViews');
var rows = new Array();
for (var i = 0; i < labels.length; i++) {
rows.push([labels[i], getRandomInt(0, 100)]);
}
data.addRows(rows);
var options = {
chart: {
title: 'Page views'
},
width: 900,
height: 500
};
var chart = new google.charts.Line(document.getElementById('div2'));
if(typeof chartReady !== 'undefined') google.visualization.events.addOneTimeListener(chart, 'ready', chartReady);
chart.draw(data, options);
}
function drawEventViews(chartReady) {
var data = new google.visualization.DataTable();
var div1 = document.getElementById("div1");
var labels = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
data.addColumn('string', 'Day');
data.addColumn('number', 'EventViews');
var rows = new Array();
for (var i = 0; i < labels.length; i++) {
rows.push([labels[i], getRandomInt(0, 100)]);
}
data.addRows(rows);
var options = {
chart: {
title: 'Event views'
},
width: 500,
height: 500
};
var chart = new google.charts.Line(document.getElementById('div1'));
if(typeof chartReady !== 'undefined') google.visualization.events.addOneTimeListener(chart, 'ready', chartReady);
chart.draw(data, options);
}
function drawCharts() {
drawPageViews(function(){
drawEventViews();
});
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>
</head>
<body>
<div id="div2"></div>
<div id="div1"></div>
</body>
</html>