如何将多个材料谷歌图表添加到一个网页？ [英] How to add multiple material google charts to one page?

查看：202
本文介绍了如何将多个材料谷歌图表添加到一个网页？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这个问题已经在，但在问候老 corechart API，我还没有问题，而不是新的材料图表。例如，下面的code将创建两个图表预期：

  VAR数据= [
    ['年'，'销售'，'费用'，'利润']，
    [2014年，1000，400，200]
    ['2015年'，1170，460，250]
    ['2016年'，660，1120，300]
    ['2017年'，1030，540，350]
];的google.load（'可视化'，'1'，{
    '包'：'corechart']
}）;google.setOnLoadCallback（drawChart）;功能drawChart（）{    新google.visualization.ColumnChart（的document.getElementById（'groupedBar'））。绘制（
        新google.visualization.arrayToDataTable（数据），{}）;    新google.visualization.ColumnChart（的document.getElementById（'stackedBar'））。绘制（
        新google.visualization.arrayToDataTable（数据），{isStacked：真}）;
}

http://jsfiddle.net/crclayton/r67ega11/10/

然而，更新的版本：

 的google.load（'可视化'，'1.1'，{//注意版本1.1和酒吧包
    '包'：['酒吧']
}）;google.setOnLoadCallback（drawChart）;功能drawChart（）{    新google.charts.Bar（的document.getElementById（'groupedBar'））。绘制（
    新google.visualization.arrayToDataTable（数据），
    google.charts.Bar.convertOptions（{}））;    新google.charts.Bar（的document.getElementById（'stackedBar'））。绘制（
    新google.visualization.arrayToDataTable（数据），
    google.charts.Bar.convertOptions（{
        isStacked：真
    }））;
}

http://jsfiddle.net/crclayton/r67ega11/6/

...只会使其中一个图表中，有时第一个，有时第二。它不会抛出一个错误，它会简单地忽略其他。我试着打破他们成单独的功能，赋予一切变量，重置 google.setOnLoadCallback 具有相同的结果。

我还发现，呈现不同类型的图表时，我不知道有这个问题。

任何想法？


解决方案

这是最有可能的 ，同样的问题报道中谷歌可视化，问题库：


  

人用的多个实例的大小看到的问题
  材料图表应与这个新的版本中得到解决。您可以
  改变你的code加载1.1现在这样，当候选发布
  可用时，您将使用它。


有至少提供两种解决方案的时刻：

选项1.渲染图同步

的总体思路是，以图表呈现同步。由于绘制函数是异步的，我们利用为目的的就绪事件处理程序。

替换为：

 函数drawChart_（）{
    新google.charts.Bar（的document.getElementById（'groupedBar'））。绘制（
    新google.visualization.arrayToDataTable（数据），
    google.charts.Bar.convertOptions（{}））;    新google.charts.Bar（的document.getElementById（'stackedBar'））。绘制（
    新google.visualization.arrayToDataTable（数据），
    google.charts.Bar.convertOptions（{
        isStacked：真
    }））;
}

与

 函数drawChart（）{    VAR groupedBarChart =新google.charts.Bar（的document.getElementById（'groupedBar'））;
    google.visualization.events.addOneTimeListener（groupedBarChart，'准备好'，函数（）{
       VAR stackedBarChart =新google.charts.Bar（的document.getElementById（'stackedBar'））;
       stackedBarChart.draw（新google.visualization.arrayToDataTable（数据），google.charts.Bar.convertOptions（{isStacked：真}））;
    }）;
    groupedBarChart.draw（新google.visualization.arrayToDataTable（数据），google.charts.Bar.convertOptions（{}））;
}

示例

\r
\r

VAR数据= [\r
    ['年'，'销售'，'费用'，'利润']，\r
    [2014年，1000，400，200]\r
    [「2015」，1170 460，250]\r
    ['2016年'，660，1120，300]\r
    ['2017年'，1030，540，350]\r
];\r
\r
\r
的google.load（'可视化'，'1.1'，{\r
    '包'：['酒吧']\r
}）;\r
\r
google.setOnLoadCallback（drawChart）;\r
\r
\r
\r
\r
功能drawChart（）{\r
\r
    VAR groupedBarChart =新google.charts.Bar（的document.getElementById（'groupedBar'））;\r
    google.visualization.events.addOneTimeListener（groupedBarChart，'准备好'，函数（）{\r
       VAR stackedBarChart =新google.charts.Bar（的document.getElementById（'stackedBar'））;\r
       stackedBarChart.draw（新google.visualization.arrayToDataTable（数据），google.charts.Bar.convertOptions（{isStacked：真}））;\r
    }）;\r
    groupedBarChart.draw（新google.visualization.arrayToDataTable（数据），google.charts.Bar.convertOptions（{}））;\r
}\r
\r
功能drawChart_（）{\r
    新google.charts.Bar（的document.getElementById（'groupedBar'））。绘制（\r
    新google.visualization.arrayToDataTable（数据），\r
    google.charts.Bar.convertOptions（{}））;\r
\r
\r
\r
    新google.charts.Bar（的document.getElementById（'stackedBar'））。绘制（\r
    新google.visualization.arrayToDataTable（数据），\r
    google.charts.Bar.convertOptions（{\r
        isStacked：真\r
    }））;\r
}

\r

＆LT;脚本类型=文/ JavaScript的SRC =htt​​ps：//开头www.google.com/jsapi\"></script>\r
＆LT;脚本类型=文/ JavaScript的SRC =chart.js之＆GT;＆LT; / SCRIPT＆GT;\r
＆LT; D​​IV CLASS =图ID =groupedBar的风格＆GT;＆LT; / DIV＆GT;\r
＆LT; D​​IV CLASS =图ID =stackedBar的风格＆GT;＆LT; / DIV＆GT;

\r

\r
\r

选项2.使用冻结版本加载器。

由于


  

在V43发行候选版本的推出，将解决这个问题。


开关使用冻结版本加载器。

步骤：

1）添加到装载的引用：＆LT;脚本
   SRC =// www.gstatic.com/charts/loader.js\"></script>

2），然后加载一个43版本库： google.charts.load（43，{包：[条]}）;

3）更换：

  google.setOnLoadCallback（drawChart）;

与

  google.charts.setOnLoadCallback（drawChart）;

示例

\r
\r

VAR数据= [\r
    ['年'，'销售'，'费用'，'利润']，\r
    [2014年，1000，400，200]\r
    [「2015」，1170 460，250]\r
    ['2016年'，660，1120，300]\r
    ['2017年'，1030，540，350]\r
];\r
\r
\r
google.charts.load（43，{包：[条，corechart]}）;\r
google.charts.setOnLoadCallback（drawChart）;\r
\r
\r
功能drawChart（）{\r
    新google.charts.Bar（的document.getElementById（'groupedBar'））。绘制（\r
    新google.visualization.arrayToDataTable（数据），\r
    google.charts.Bar.convertOptions（{}））;\r
\r
\r
\r
    新google.charts.Bar（的document.getElementById（'stackedBar'））。绘制（\r
    新google.visualization.arrayToDataTable（数据），\r
    google.charts.Bar.convertOptions（{\r
        isStacked：真\r
    }））;\r
}

\r

＆LT;脚本类型=文/ JavaScript的SRC =htt​​ps：//开头www.google.com/jsapi\"></script>\r
＆所述; SCRIPT SRC =htt​​p://www.gstatic.com/charts/loader.js＆GT;＆下; /脚本＆GT;\r
＆LT; D​​IV CLASS =图ID =groupedBar的风格＆GT;＆LT; / DIV＆GT;\r
＆LT; D​​IV CLASS =图ID =stackedBar的风格＆GT;＆LT; / DIV＆GT;

\r

\r
\r

This question has been asked before, but in regards to the old corechart API, which I haven't had a problem with, not the new Material charts. For instance, the following code will create two charts as expected:

var data = [
    ['Year', 'Sales', 'Expenses', 'Profit'],
    ['2014', 1000, 400, 200],
    ['2015', 1170, 460, 250],
    ['2016', 660, 1120, 300],
    ['2017', 1030, 540, 350]
];

google.load('visualization', '1', {
    'packages': ['corechart']
});

google.setOnLoadCallback(drawChart);

function drawChart() {

    new google.visualization.ColumnChart(document.getElementById('groupedBar')).draw(
        new google.visualization.arrayToDataTable(data), {});

    new google.visualization.ColumnChart(document.getElementById('stackedBar')).draw(
        new google.visualization.arrayToDataTable(data), {isStacked:true});
}

http://jsfiddle.net/crclayton/r67ega11/10/

However, the updated version:

google.load('visualization', '1.1', {      // note version 1.1 and bar package 
    'packages': ['bar']                     
});

google.setOnLoadCallback(drawChart);

function drawChart() {

    new google.charts.Bar(document.getElementById('groupedBar')).draw(
    new google.visualization.arrayToDataTable(data),
    google.charts.Bar.convertOptions({}));

    new google.charts.Bar(document.getElementById('stackedBar')).draw(
    new google.visualization.arrayToDataTable(data),
    google.charts.Bar.convertOptions({
        isStacked: true
    }));
}

http://jsfiddle.net/crclayton/r67ega11/6/

... will only render one of the charts, sometimes the first, sometimes the second. It won't throw an error, it will simply ignore the other. I've tried breaking them up into individual functions, assigning everything to variables, resetting google.setOnLoadCallback with the same results.

I've also found that when rendering different types of charts, I don't have that problem.

Any ideas?

解决方案

It's most likely the same issue that was reported in google-visualization-issues repository:

The problems people have seen with the sizing of multiple instances of material charts should be resolved with this new release. You can change your code to load "1.1" now so that when the candidate release becomes available, you will be using it.

There are at least two solutions available at the moment:

Option 1. Render charts synchronously

The general idea is to render chart synchronously. Since draw function is asynchronous, we utilize ready event handler for that purpose.

Replace: 

function drawChart_() {
    new google.charts.Bar(document.getElementById('groupedBar')).draw(
    new google.visualization.arrayToDataTable(data),
    google.charts.Bar.convertOptions({}));



    new google.charts.Bar(document.getElementById('stackedBar')).draw(
    new google.visualization.arrayToDataTable(data),
    google.charts.Bar.convertOptions({
        isStacked: true
    }));
}

with:

function drawChart() {

    var groupedBarChart = new google.charts.Bar(document.getElementById('groupedBar'));
    google.visualization.events.addOneTimeListener(groupedBarChart, 'ready', function(){
       var stackedBarChart = new google.charts.Bar(document.getElementById('stackedBar'));
       stackedBarChart.draw(new google.visualization.arrayToDataTable(data),google.charts.Bar.convertOptions({isStacked: true}));
    });
    groupedBarChart.draw(new google.visualization.arrayToDataTable(data),google.charts.Bar.convertOptions({}));
}

Example

var data = [
    ['Year', 'Sales', 'Expenses', 'Profit'],
    ['2014', 1000, 400, 200],
    ['2015', 1170, 460, 250],
    ['2016', 660, 1120, 300],
    ['2017', 1030, 540, 350]
];


google.load('visualization', '1.1', {
    'packages': ['bar']
});

google.setOnLoadCallback(drawChart);




function drawChart() {

    var groupedBarChart = new google.charts.Bar(document.getElementById('groupedBar'));
    google.visualization.events.addOneTimeListener(groupedBarChart, 'ready', function(){
       var stackedBarChart = new google.charts.Bar(document.getElementById('stackedBar'));
       stackedBarChart.draw(new google.visualization.arrayToDataTable(data),google.charts.Bar.convertOptions({isStacked: true}));
    });
    groupedBarChart.draw(new google.visualization.arrayToDataTable(data),google.charts.Bar.convertOptions({}));
}

function drawChart_() {
    new google.charts.Bar(document.getElementById('groupedBar')).draw(
    new google.visualization.arrayToDataTable(data),
    google.charts.Bar.convertOptions({}));



    new google.charts.Bar(document.getElementById('stackedBar')).draw(
    new google.visualization.arrayToDataTable(data),
    google.charts.Bar.convertOptions({
        isStacked: true
    }));
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="chart.js"></script>
<div class="chart" id="groupedBar" style></div>
<div class="chart" id="stackedBar" style></div>

Option 2. Using the frozen version loader.

Since

The rollout of the v43 candidate release that would fix this problem

switch to using the frozen version loader.

Steps:

1)Add a reference to loader: <script src="//www.gstatic.com/charts/loader.js"></script>

2)Then load a 43 version of library: google.charts.load("43",{packages:["bar"]});

3)Replace: 

google.setOnLoadCallback(drawChart);

with

google.charts.setOnLoadCallback(drawChart);

Example

var data = [
    ['Year', 'Sales', 'Expenses', 'Profit'],
    ['2014', 1000, 400, 200],
    ['2015', 1170, 460, 250],
    ['2016', 660, 1120, 300],
    ['2017', 1030, 540, 350]
];


google.charts.load("43",{packages:["bar","corechart"]});
google.charts.setOnLoadCallback(drawChart);


function drawChart() {
    new google.charts.Bar(document.getElementById('groupedBar')).draw(
    new google.visualization.arrayToDataTable(data),
    google.charts.Bar.convertOptions({}));



    new google.charts.Bar(document.getElementById('stackedBar')).draw(
    new google.visualization.arrayToDataTable(data),
    google.charts.Bar.convertOptions({
        isStacked: true
    }));
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="groupedBar" style></div>
<div class="chart" id="stackedBar" style></div>

这篇关于如何将多个材料谷歌图表添加到一个网页？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆