个人中心
gpt4 book ai didi

javascript - 试图在一页上获取多个 Google 图表，但没有成功

转载 作者：行者123 更新时间：2023-11-28 06:47:59 26 4
gpt4 key购买 nike

我一直在 stackoverflow 上进行一些研究，但我似乎无法查明我的问题。这段代码工作了一段时间，但很快就停止工作了。我正在尝试让 3 个谷歌图表显示在一页上。代码有问题吗？

在下面

<小时/> 
<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>

关于javascript - 试图在一页上获取多个 Google 图表，但没有成功，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33228479/

26 4 0
文章推荐： javascript - Javascript 中的 CIE(色度/开尔文温度)色域
文章推荐： javascript - 如何使用 jQuery 或 Javascript 调整某个框的大小而不调整其旁边的框的大小？
文章推荐： javascript - 在 Office Apps for Excel 2013 中 - 无法重新定义不可配置的属性 'context'“
文章推荐： c++ - 有什么方法可以从 Visual Studio 生成 nmake 吗？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com