Fatal编程技术网
  • javascript/
  • Javascript 试图在一个页面上获得多个谷歌图表，运气不好

Javascript 试图在一个页面上获得多个谷歌图表，运气不好

javascript php arrays charts maps

Javascript 试图在一个页面上获得多个谷歌图表，运气不好,javascript,php,arrays,charts,maps,Javascript,Php,Arrays,Charts,Maps,我一直在做一些关于stackoverflow的研究，但是我似乎无法指出我的问题。这段代码运行了一段时间，但停止运行的速度几乎和以前一样快。我试图让3个谷歌图表显示在一个页面上。代码有问题吗 在下面 //加载可视化API和piechart包。 load（'visualization'，'1.0'，'{ “包”：[“行”、“核心图表”] }); //将回调设置为在加载Google Visualization API时运行。 setOnLoadCallback（drawChart）； //创建并填

我一直在做一些关于stackoverflow的研究，但是我似乎无法指出我的问题。这段代码运行了一段时间，但停止运行的速度几乎和以前一样快。我试图让3个谷歌图表显示在一个页面上。代码有问题吗

在下面


//加载可视化API和piechart包。
load（'visualization'，'1.0'，'{
“包”：[“行”、“核心图表”]
});
//将回调设置为在加载Google Visualization API时运行。
setOnLoadCallback（drawChart）；
//创建并填充数据表的回调，
//实例化饼图，传入数据并
//画它。
函数绘图图（）{
var chart0=document.getElementById（'curve_chart0'）；
var data0=new google.visualization.DataTable（）；
data0.addColumn（'string'，''）；
data0.addColumn（'编号'，'高度'）；
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]
]);
变量选项0={
图表：{
},
图例：{
位置：“无”
},
系列：{
//为每个系列指定一个与下面的Y轴匹配的轴名称。
0: {
轴：“高度”
},
1: {
轴：“速度”
}
},
宽度：400，
身高：150，
轴线：{
//向每个轴添加标签；标签不必与轴名称匹配。
y:{
海拔高度：{
标签：“高度”
},
速度：{
标签：“速度”
}
}
}
};
chart0=新的google.charts.Line（document.getElementById（'curve_chart0'）；
图表0.绘图（数据0，选项0）；
var chart1=document.getElementById（'curve_chart1'）；
var data1=新的google.visualization.DataTable（）；
data1.addColumn（'string'，''）；
数据1.addColumn（'编号'，'高度'）；
数据1.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]
]);
变量选项1={
图表：{
},
图例：{
位置：“无”
},
系列：{
//为每个系列指定一个与下面的Y轴匹配的轴名称。
0: {
轴：“高度”
},
1: {
轴：“速度”
}
},
宽度：400，
身高：150，
轴线：{
//向每个轴添加标签；标签不必与轴名称匹配。
y:{
海拔高度：{
标签：“高度”
},
速度：{
标签：“速度”
}
}
}
};
chart1=新的google.charts.Line（document.getElementById（'curve_chart1'）；
图表1.绘图（数据1，选项1）；
var chart2=document.getElementById（'curve_chart2'）；
var data2=新的google.visualization.DataTable（）；
data2.addColumn（'string'，''）；
数据2.addColumn（'编号'，'高度'）；
数据2.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选项2={
图表：{
},
图例：{
位置：“无”
},
系列：{
//为每个系列指定一个与下面的Y轴匹配的轴名称。
0: {
轴：“高度”
},
1: {
轴：“速度”
}
},
宽度：400，
身高：150，
轴线：{
//向每个轴添加标签；标签不必与轴名称匹配。
y:{
海拔高度：{
标签：“高度”
},
速度：{
标签：“速度”
}
}
}
};
chart2=新的google.charts.Line（document.getElementById（'curve_chart2'）；
图表2.绘图（数据2，选项2）；
}
试试这个，它可以工作：-

<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>


load（'visualization'，'1.0'，{packages:['line']}）；
setOnLoadCallback（绘图图）；
函数drawPageViews（chartReady）{
var data=new google.visualization.DataTable（）；
var div2=document.getElementById（“div2”）；
变量标签=['m'，'n'，'o'，'p'，'q'，'r'，'s']；
data.addColumn（'string'，'Day'）；
data.addColumn（'number'，'PageViews'）；
var rows=新数组（）；
对于（变量i=0；i<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>