Google Charts Javascript，使用两个数组为折线图输入数据

Question

I am trying to create a line chart using the Google Charts package. 我正在尝试使用Google Charts包创建折线图。 The problem I have is that I want to plot data from two Javascript arrays. 我的问题是我想从两个Javascript数组中绘制数据。 I did find some code showing how to do this for a barchart, but I can not get the same code to work for creating a line chart. 我确实找到了一些代码来显示如何对条形图执行此操作，但是我无法获得用于创建折线图的相同代码。 This is the code I have so far. 这是我到目前为止的代码。

<html>
<head>


  <!--Load the AJAX API-->
  <script type="text/javascript" src="https://www.google.com/jsapi"> </script>
  <script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);


    var time = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    var suseptible = [0, 4, 5, 2, 6, 7, 3, 9, 9, 9];

    function drawChart(){

        var data = google.visualization.arrayToDataTable();
        data.addColumn('number', 'Time');
        data.addColumn('number', 'Suseptible');

        for(var i=0; i < time.length; i++){
            var row = [time[i], suseptible[i]];
            data.addRow(row);
        }



        var options = {

        };

        var chart = new  google.visualization.LineChart(document.getElementById('chart_id'));
        chart.draw(data, options);
    }


</script>
</head>

<body>
<!--Div that will hold the pie chart-->
<div id="chart_id"></div>
</body>
</html>

Can anyone explain the basics for how to do this. 任何人都可以解释如何执行此操作的基础知识。 I have been looking in the Google Charts documentation, but I am having a hard time solving this. 我一直在寻找Google Charts文档，但是很难解决这个问题。

Answer 1

First, I would recommend using loader.js instead of jsapi to load the library. 首先，我建议使用loader.js而不是jsapi来加载库。
Loading frozen version '44' due to recent issues . 由于近期问题，正在加载冻结的版本'44' 。

Next, I noticed you are using arrayToDataTable 接下来，我注意到您正在使用arrayToDataTable
This requires an array argument be passed (see examples from link). 这需要传递一个数组参数（请参阅链接中的示例）。
Use this when your data is already complete and exists in an array. 当您的数据已经完成并且存在于数组中时，请使用此选项。

Next you need a domain column, typically the first column is a date or label for which the value represents. 接下来，您需要一个域列，通常第一列是该值所代表的日期或标签。 In this example, I use the array index as the "Id". 在此示例中，我将数组索引用作“ Id”。

 // load frozen version 44 google.charts.load('44', { callback: drawChart, packages: ['corechart'] }); // init array data var time = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; var suseptible = [0, 4, 5, 2, 6, 7, 3, 9, 9, 9]; function drawChart(){ // create DataTable var data = new google.visualization.DataTable(); data.addColumn('number', 'Id'); data.addColumn('number', 'Time'); data.addColumn('number', 'Suseptible'); // load data for (var i = 0; i < time.length; i++) { var row = [i, time[i], suseptible[i]]; data.addRow(row); } var options = {}; var chart = new google.visualization.LineChart(document.getElementById('chart_id')); chart.draw(data, options); }

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_id"></div>

Google Charts Javascript，使用两个数组为折线图输入数据

问题描述

1 个解决方案

解决方案1
0 2016-03-14 12:37:05

Google Charts Javascript，使用两个数组为折线图输入数据

问题描述

1 个解决方案

解决方案1 0 2016-03-14 12:37:05

解决方案1
0 2016-03-14 12:37:05