程序员经验分享-hwhale

如何在一页上添加两个Google图表？

2023-11-23

我做了什么

我已将 Google 图表添加到我的页面顶部。这将返回图表的图像。

我需要做什么

我只需要将第二个图表添加到同一页面即可。

问题

第二个图表的代码将被忽略。我很大程度上怀疑这是由于我错误地组合了每个图表的代码。

The code

第一张图表（线）：

    <!--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':['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 data = new google.visualization.DataTable();
    data.addColumn('string', 'Month');
    data.addColumn('number', 'Apples');
    data.addColumn('number', 'Oranges');
    data.addRows([
      ['Oct 11', 20, 0],
      ['Nov 11', 0, 0],
      ['Dec 12',  0, 20],
      ['Jan 12', 0, 10],
      ['Feb 12', 0, 10],
      ['March 12', 10, 10]
    ]);

    // Set chart options
    var options = {'width':960,
                   'height':300};

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
    chart.draw(data, options);
  }

</script>

第二张图（饼图）：

    <!--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':['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() {

    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
      ['Mushrooms', 3],
      ['Onions', 1],
      ['Olives', 1],
      ['Zucchini', 1],
      ['Pepperoni', 2]
    ]);

    // Set chart options
    var options = {'title':'How Much Pizza I Ate Last Night',
                   'width':400,
                   'height':300};

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

每个图表都使用具有唯一 id 的容器 div 在正文中调用：

<div id="chart_div"></div>

我的问题

如何将这两块代码拼接在一起？我尝试复制drawChart()并指定唯一的函数名称和变量，但无济于事。


Solution

我现在有一个可行的解决方案。它涉及辨别示例代码的哪些部分要重复，哪些部分不重复（如 Oofpez 所建议的）。每个图表的数据、选项和图表变量都在 ONE drawChart() 函数中定义。

这是一个工作示例（只需复制并粘贴到 HTML 文档中）：

...这个示例进一步演示了如何组合不同的图表类型，即饼图和折线图...

<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':['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() {

            // Create the data table.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Topping');    
            data.addColumn('number', 'Slices');
            data.addRows([
              ['Mushrooms', 3],
              ['Onions', 1],
              ['Olives', 1],
              ['Zucchini', 1],
              ['Pepperoni', 2]
            ]);
            // Create the data table.
            var data2 = new google.visualization.DataTable();
            data2.addColumn('string', 'Topping');
            data2.addColumn('number', 'Slices');
            data2.addRows([
              ['Mushrooms', 3],
              ['Onions', 1],
              ['Olives', 15],
              ['Zucchini', 1],
              ['Pepperoni', 2]
            ]);

            var data3 = new google.visualization.DataTable();
            data3.addColumn('string', 'Year');
            data3.addColumn('number', 'Sales');
            data3.addColumn('number', 'Expenses');
            data3.addRows([
              ['2004', 1000, 400],
              ['2005', 1170, 460],
              ['2006',  860, 580],
              ['2007', 1030, 540]
            ]);

            // Set chart options
            var options = {'title':'How Much Pizza I Ate Last Night',
                           'width':400,
                           'height':300};
            // Set chart options
            var options2 = {'title':'How Much Pizza You Ate Last Night',
                           'width':400,
                           'height':300};
            // Set chart options
            var options3 = {'title':'Line chart',
                           'width':400,
                           'height':300};

            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
            chart.draw(data, options);
            var chart2 = new google.visualization.PieChart(document.getElementById('chart_div2'));
            chart2.draw(data2, options2);
            var chart3 = new google.visualization.LineChart(document.getElementById('chart_div3'));
            chart3.draw(data3, options3);

          }
        </script>
      </head>

      <body>
        <!--Divs that will hold the charts-->
        <div id="chart_div"></div>
        <div id="chart_div2"></div>
        <div id="chart_div3"></div>
      </body>
    </html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

charts

如何在一页上添加两个Google图表？ 的相关文章

随机推荐

  • protobuf-net 字节数组上的 OverwriteList

    我正在做的是尝试通过 protobuf net 发送 IPEndpoint 我观察到 当将 4 字节数组反序列化为 IP4 地址时 设置代码收到 8 字节的值 四个字节包含原始地址 另外 4 个字节包含序列化的地址 通过单步执行代码 我已经

  • 使用两个多对多时 GROUP_CONCAT 中的值重复 [重复]

    这个问题在这里已经有答案了 我试图在字符串中加入两个多对多关联 在此示例中 每个团队都有未确定的颜色数量和未确定的获奖数量 这是架构 这是我正在使用的查询 SELECT teams name AS name GROUP CONCAT col

  • 更改 5.0+ 上的对话框文本颜色

    我正在尝试更改对话框中的文本颜色 最常见的是 AlertDialog 我已经尝试了这些页面上的所有解决方案 AlertDialog 样式 如何更改标题 消息等的样式 颜色 如何更改 AlertDialog 标题的颜色及其下方线条的颜色 如何

  • Spring Boot + Spring Data 多租户

    是否可以将 Spring Boot 配置为使用 MultiTenantConnectionProvider 以便我系统的每个客户端都连接到自己的私有数据库 具体来说 我希望使用内置的休眠支持来支持多租户 http docs jboss or

  • 如何使用javascript更改占位符的颜色？ [复制]

    这个问题在这里已经有答案了 我想在调用 mobileValidate 后更改此占位符的颜色

  • Sass：使用@for循环改变颜色

    I try to darken a variable number of divs like that with following code mixin color divs count baseName startcolor color

  • 启用双重逃逸有危险吗？

    我有一个 ASP NET MVC 应用程序 其路径允许通过 search 搜索内容 当我提供 search abc 时 它运行良好 但是当我提供 search a b c 正确的 url 编码 时 IIS7 会拒绝该请求 并出现 HTTP

  • 未定义用户定义类型 - 从 Excel 控制 Word

    我正在尝试从 Excel 2007 到 Word 2007 进行一些相对简单的复制和粘贴 我浏览过这个网站和其他网站 但一直对同一件事感到困惑 下面的代码的第三行不断给我 用户类型注释已定义 错误消息 我真的很困惑 因为我刚刚从另一个解决方

  • 将自定义标签添加到材料范围滑块

    I m using Android material components library s latest 1 3 0 alpha01 version to display a range slider slider with two t

  • Laravel 5.4 EloquentUserProvider 重写 validateCredentials

    public function validateCredentials UserContract user array credentials plain credentials password return this gt hasher

  • Java == 对于 String 对象不再起作用？

    public class Comparison public static void main String args String s prova String s2 prova System out println s s2 Syste

  • ggplot2 3D 条形图

    我知道这听起来很基本 但已经搜索了一个多小时 但没有成功 我只是想使用 ggplot2 包在 R 中绘制 3D 条形图 我的数据框看起来像这样 x y z t1 5 high t1 2 low t1 4 med t2 8 high t2 1

  • 以编程方式从应用程序启动 Skype 并传递号码 - Android

    尝试启动并传递电话 不 通过我的应用程序中的以下代码转至 Skype PackageManager packageManager getPackageManager Intent skype packageManager getLaunch

  • 从 HttpWebRequest/Response 获取底层 tcp 连接

    我试图获取更多有关当我连接到比 HttpWebRequest 和 HttpWebResponse 给我的级别更低的网站时发生的情况的信息 我正在使用 C 我希望能够查看有关 dns 查找以及建立连接所需时间的信息 如果建立了新连接 Http

  • django urlfield http 前缀

    有谁知道如何摆脱 Django urlfield 中的 http 前缀 我的意思是 当我们将一个字段定义为 urlfield 并尝试向其中输入 url 时 如果没有提供 schema django 会自动为其添加 http 前缀 我不想要这

  • Python-是否有函数或公式可以找到 RGB 代码的补色？

    我试图在Python 3中找到一个好的公式来计算rgb代码的补色 例如 a b 的互补 有什么办法可以做到这一点吗 下面介绍如何直接计算 RGB 颜色的补色 它给出的结果与使用的算法相同colorsys正如 Iva Klass 的回答所示

  • Qt - 定时器只能与以 QThread 启动的线程一起使用

    我的代码是 class ExampleTest public QObject Q OBJECT public ExampleTest private Q SLOTS void DoAllExampleTests void ExampleTe

  • array_intersect，但针对单个数组变量的子数组

    我有一个看起来像这样的数组 foo array 0 gt array a b c d 1 gt array b c d 2 gt array b d f 我会参考 foo 0 foo 1 and foo 2 作为子数组 我基本上需要执行ar

  • 缩小图像大小以适合表格单元格，这适用于所有浏览器吗？

    我有一个table它的单元格中有图像 我希望这些图像在窗口宽度减小时自动缩小 但他们应该not当周围有额外空间时 它们会扩展到超出其原始大小 我有一个解决方案 适用于 Chrome 但不适用于 Firefox 或 Internet Expl

  • 如何在一页上添加两个Google图表？

    我做了什么 我已将 Google 图表添加到我的页面顶部 这将返回图表的图像 我需要做什么 我只需要将第二个图表添加到同一页面即可 问题 第二个图表的代码将被忽略 我很大程度上怀疑这是由于我错误地组合了每个图表的代码 The code 第一

热门标签