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

Google Charts Javascript, using two arrays for data input for a line chart

本文关键字：数组 两个 折线图 输入 数据 Javascript Charts Google      更新时间：2023-09-26

我正在尝试使用Google图表软件包创建折线图。我遇到的问题是我想从两个 Javascript 数组绘制数据。我确实找到了一些代码来显示如何为条形图执行此操作，但我无法获得相同的代码来创建折线图。这是我到目前为止的代码。

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

谁能解释一下如何做到这一点的基础知识。我一直在查看Google图表文档，但是我很难解决这个问题。

首先，我建议使用 loader.js 而不是 jsapi 来加载库。
由于最近的问题，加载冻结版本'44'。

接下来，我注意到您正在使用arrayToDataTable
这需要传递数组参数（请参阅链接中的示例）。
当您的数据已经完成并且存在于数组中时，请使用此选项。

接下来，您需要一个域列，通常第一列是值表示的日期或标签。在此示例中，我使用数组索引作为"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>

相关文章：