javascript - 将两个数组放在谷歌图表中

Question

我有两个数组:

Sales [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

和

Dates [01/03/2017, 02/03/2017, 03/03/2017, 04/03/2017, 05/03/2017, 06/03/2017, 07/03/2017, 08/03/2017, 09/03/2017, 10/03/2017, 11/03/2017, 12/03/2017, 13/03/2017, 14/03/2017, 15/03/2017, 16/03/2017, 17/03/2017, 18/03/2017, 19/03/2017, 20/03/2017, 21/03/2017, 22/03/2017, 23/03/2017, 24/03/2017, 25/03/2017, 26/03/2017, 27/03/2017, 28/03/2017, 29/03/2017, 30/03/2017, 31/03/2017]

我不知道这样对不对，但我是在变量中玩:

var dates= [
            <c:forEach var="a" items="${getDates}" varStatus="s">
            ['${a}'],
            </c:forEach>
            ];

和:

var sales= [
   <c:forEach var="b" items="${getSales}" varStatus="s">
     [${b}],
   </c:forEach>
];

我想输入这段代码，但我不能:

<script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Dates', 'Sales'],
          for (var i = 0; i <= dates.length; i++) {
            [dates[i], sales[i]],
}
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>

这是逻辑吗？我不知道如何解决它。你能帮帮我吗？

Answer 1

不能将 for 语句放在对 arrayToDataTable 的方法调用中

相反，首先创建DataTable，然后添加行，

请参阅以下工作片段...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var sales = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
  var dates = ['01/03/2017', '02/03/2017', '03/03/2017', '04/03/2017', '05/03/2017', '06/03/2017', '07/03/2017', '08/03/2017', '09/03/2017', '10/03/2017', '11/03/2017', '12/03/2017', '13/03/2017', '14/03/2017', '15/03/2017', '16/03/2017', '17/03/2017', '18/03/2017', '19/03/2017', '20/03/2017', '21/03/2017', '22/03/2017', '23/03/2017', '24/03/2017', '25/03/2017', '26/03/2017', '27/03/2017', '28/03/2017', '29/03/2017', '30/03/2017', '31/03/2017'];

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'x');
  data.addColumn('number', 'y');

  for (var i = 0; i < dates.length; i++) {
    data.addRow([dates[i], sales[i]]);
  }

  var options = {
    chartArea: {
      bottom: 60
    },
    title: 'Company Performance',
    curveType: 'function',
    legend: { position: 'bottom' }
  };

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

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

---

注意:问题中发布的Dates 数组看起来有点可疑

它应该看起来更像上面片段中的那个

如果您想要一个实际的 'date' 而不是 'string'，

你需要构建这样的东西......

var dates = [new Date('01/03/2017'), new Date('02/03/2017'), new Date('03/03/2017'), ...