GOOGLE CHARTS 使用实现折线图作为动态数组对象循环

Question

数组对象看起来像这样我从 ruby​​ 中按产品名称日期和成本分组获取数据并存储在一个变量中......

第一个数组是产品名称，第二个数组数据是日期和成本。如何结合产品名称在 x 上显示为日期，在 y 轴上显示为成本

如何在图表中实现，就像我不知道如何在 javascript 中为数组数据数组迭代循环并使用 arraydatatable 或数据表在 x 和 y 轴上显示如果我传递直接数据数组，它与 highcharts 一起工作正常 我的代码：

  <script type="text/javascript">
    data2 = [{"name":"productname","data":[["2018-03-01",18.89034482758612],["2018-03-02",18.89268292682916],["2018-03-05",18.89324503311252],["2018-03-07",18.89268292682916],["2018-03-10",18.89377777777766],["2018-03-11",18.893525179856],["2018-03-12",18.89359999999988],["2018-03-13",18.89311475409824],["2018-03-14",18.89311475409824],["2018-03-15",18.89294117647046],["2018-03-16",18.89272727272716],["2018-03-17",18.89387173396662],["2018-03-18",18.89366292134818],["2018-03-19",18.8923456790122]]}] 
          google.charts.load('current', {'packages':['corechart']});
          google.charts.setOnLoadCallback(drawChart);

          function drawChart() {
            var data = google.visualization.arrayToDataTable(data2
              );

            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>

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable(data2);
    // how to iterate loop for get all data from one varible  
        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

您需要为每个产品添加一个数据表列，
然后为产品数据中的每个数组添加一个数据表行

可能看起来像这样......

$.each(jsonData, function(productIndex, product) {
  // add product column
  var colIndex = dataTable.addColumn('number', product.name);

  // add product data
  $.each(product.data, function(dataIndex, data) {
    var rowIndex = dataTable.addRow();
    dataTable.setValue(rowIndex, 0, new Date(data[0]));
    dataTable.setValue(rowIndex, colIndex, data[1]);
  });
});

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  // create chart
  var container = $('#chart_div').get(0);
  var chart = new google.visualization.LineChart(container);
  var options = {
    chartArea: {
      height: '100%',
      width: '100%',
      top: 64,
      left: 64,
      right: 32,
      bottom: 48
    },
    height: '100%',
    legend: {
      position: 'top'
    },
    pointSize: 4,
    width: '100%'
  };

  // create data table
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('date', 'Date');

  // get data
  $.ajax({
    url: 'path to data',
    dataType: 'json'
  }).done(function (jsonData) {
    loadData(jsonData);
  }).fail(function (jqXHR, textStatus, errorThrown) {
    var jsonData = [{"name":"product a","data":[["2018-03-01",18.89034482758612],["2018-03-02",18.89268292682916],["2018-03-05",18.89324503311252],["2018-03-07",18.89268292682916],["2018-03-10",18.89377777777766],["2018-03-11",18.893525179856],["2018-03-12",18.89359999999988],["2018-03-13",18.89311475409824],["2018-03-14",18.89311475409824],["2018-03-15",18.89294117647046],["2018-03-16",18.89272727272716],["2018-03-17",18.89387173396662],["2018-03-18",18.89366292134818],["2018-03-19",18.8923456790122]]},{"name":"product b","data":[["2018-03-01",18.99034482758612],["2018-03-02",18.99268292682916],["2018-03-05",18.99324503311252],["2018-03-07",18.99268292682916],["2018-03-10",18.99377777777766],["2018-03-11",18.993525179856],["2018-03-12",18.99359999999988],["2018-03-13",18.99311475409824],["2018-03-14",18.99311475409824],["2018-03-15",18.99294117647046],["2018-03-16",18.99272727272716],["2018-03-17",18.99387173396662],["2018-03-18",18.99366292134818],["2018-03-19",18.9923456790122]]}];
    loadData(jsonData);
  });

  // load json data
  function loadData(jsonData) {
    $.each(jsonData, function(productIndex, product) {
      // add product column
      var colIndex = dataTable.addColumn('number', product.name);

      // add product data
      $.each(product.data, function(dataIndex, data) {
        var rowIndex = dataTable.addRow();
        dataTable.setValue(rowIndex, 0, new Date(data[0]));
        dataTable.setValue(rowIndex, colIndex, data[1]);
      });
    });
    drawChart();
  }

  // draw chart
  $(window).resize(drawChart);
  function drawChart() {
    chart.draw(dataTable, options);
  }
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

.chart {
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart_div"></div>

---

编辑

对于简单的数组数据，更简单，对于饼图...

    // create data table
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn('string', 'Product');
    dataTable.addColumn('number', 'Value');

    $.each(jsonData, function(productIndex, product) {
      // add product data
      dataTable.addRow([
        product[0],
        product[1],
      ]);
    });

---

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  // get column data
  $.ajax({
    url: 'path to data',
    dataType: 'json'
  }).done(function (jsonData) {
    loadData(jsonData);
  }).fail(function (jqXHR, textStatus, errorThrown) {
    var jsonData = [{"name":"product a","data":[["2018-03-01",18.89034482758612],["2018-03-02",18.89268292682916],["2018-03-05",18.89324503311252],["2018-03-07",18.89268292682916],["2018-03-10",18.89377777777766],["2018-03-11",18.893525179856],["2018-03-12",18.89359999999988],["2018-03-13",18.89311475409824],["2018-03-14",18.89311475409824],["2018-03-15",18.89294117647046],["2018-03-16",18.89272727272716],["2018-03-17",18.89387173396662],["2018-03-18",18.89366292134818],["2018-03-19",18.8923456790122]]},{"name":"product b","data":[["2018-03-01",18.99034482758612],["2018-03-02",18.99268292682916],["2018-03-05",18.99324503311252],["2018-03-07",18.99268292682916],["2018-03-10",18.99377777777766],["2018-03-11",18.993525179856],["2018-03-12",18.99359999999988],["2018-03-13",18.99311475409824],["2018-03-14",18.99311475409824],["2018-03-15",18.99294117647046],["2018-03-16",18.99272727272716],["2018-03-17",18.99387173396662],["2018-03-18",18.99366292134818],["2018-03-19",18.9923456790122]]}];
    loadData(jsonData, 'Column');
  });

  // get pie data
  $.ajax({
    url: 'path to data',
    dataType: 'json'
  }).done(function (jsonData) {
    loadData(jsonData);
  }).fail(function (jqXHR, textStatus, errorThrown) {
    var jsonData = [["product1",3.6126719999999977],["product2",6.827597999999999],["product2",1008.0]];
    loadData(jsonData, 'Pie');
  });

  // load json data
  function loadData(jsonData, chartType) {
    // create data table
    var dataTable = new google.visualization.DataTable();

    switch (chartType) {
      case 'Column':
        // add date column
        dataTable.addColumn('date', 'Date');

        $.each(jsonData, function(productIndex, product) {
          // add product column
          var colIndex = dataTable.addColumn('number', product.name);

          // add product data
          $.each(product.data, function(dataIndex, data) {
            var rowIndex = dataTable.addRow();
            dataTable.setValue(rowIndex, 0, new Date(data[0]));
            dataTable.setValue(rowIndex, colIndex, data[1]);
          });
        });
        break;

      case 'Pie':
        // add product columns
        dataTable.addColumn('string', 'Product');
        dataTable.addColumn('number', 'Value');

        $.each(jsonData, function(productIndex, product) {
          // add product data
          dataTable.addRow([
            product[0],
            product[1],
          ]);
        });
        break;
    }

    // draw chart
    $(window).resize(function () {
      drawChart(chartType, dataTable);
    });
    drawChart(chartType, dataTable);
  }

  // save charts for redraw
  var charts = {};
  var options = {
    Column: {
      chartArea: {
        height: '100%',
        width: '100%',
        top: 64,
        left: 64,
        right: 32,
        bottom: 48
      },
      height: '100%',
      legend: {
        position: 'top'
      },
      pointSize: 4,
      width: '100%'
    },
    Pie: {
      height: '100%',
      width: '100%'
    }
  };

  // draw chart
  function drawChart(chartType, dataTable) {
    if (!charts.hasOwnProperty(chartType)) {
      charts[chartType] = new google.visualization.ChartWrapper({
        chartType: chartType + 'Chart',
        containerId: 'chart-' + chartType.toLowerCase(),
        options: options[chartType]
      });
    }
    charts[chartType].setDataTable(dataTable);
    charts[chartType].draw();
  }
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

.chart {
  display: inline-block;
  height: 100%;
  width: 49%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart-column"></div>
<div class="chart" id="chart-pie"></div>

---

编辑 2

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  // get data 0
  $.ajax({
    url: 'path to data',
    dataType: 'json'
  }).done(function (jsonData) {
    loadData(jsonData);
  }).fail(function (jqXHR, textStatus, errorThrown) {
    var jsonData = [{"name":"product a","data":[["2018-03-01",18.89034482758612],["2018-03-02",18.89268292682916],["2018-03-05",18.89324503311252],["2018-03-07",18.89268292682916],["2018-03-10",18.89377777777766],["2018-03-11",18.893525179856],["2018-03-12",18.89359999999988],["2018-03-13",18.89311475409824],["2018-03-14",18.89311475409824],["2018-03-15",18.89294117647046],["2018-03-16",18.89272727272716],["2018-03-17",18.89387173396662],["2018-03-18",18.89366292134818],["2018-03-19",18.8923456790122]]},{"name":"product b","data":[["2018-03-01",18.99034482758612],["2018-03-02",18.99268292682916],["2018-03-05",18.99324503311252],["2018-03-07",18.99268292682916],["2018-03-10",18.99377777777766],["2018-03-11",18.993525179856],["2018-03-12",18.99359999999988],["2018-03-13",18.99311475409824],["2018-03-14",18.99311475409824],["2018-03-15",18.99294117647046],["2018-03-16",18.99272727272716],["2018-03-17",18.99387173396662],["2018-03-18",18.99366292134818],["2018-03-19",18.9923456790122]]}];
    loadData(jsonData, '0', 'Column');
  });

  // get data 1
  $.ajax({
    url: 'path to data',
    dataType: 'json'
  }).done(function (jsonData) {
    loadData(jsonData);
  }).fail(function (jqXHR, textStatus, errorThrown) {
    var jsonData = [{"name":"product a","data":[["2018-03-01",18.89034482758612],["2018-03-02",18.89268292682916],["2018-03-05",18.89324503311252],["2018-03-07",18.89268292682916],["2018-03-10",18.89377777777766],["2018-03-11",18.893525179856],["2018-03-12",18.89359999999988],["2018-03-13",18.89311475409824],["2018-03-14",18.89311475409824],["2018-03-15",18.89294117647046],["2018-03-16",18.89272727272716],["2018-03-17",18.89387173396662],["2018-03-18",18.89366292134818],["2018-03-19",18.8923456790122]]},{"name":"product b","data":[["2018-03-01",18.99034482758612],["2018-03-02",18.99268292682916],["2018-03-05",18.99324503311252],["2018-03-07",18.99268292682916],["2018-03-10",18.99377777777766],["2018-03-11",18.993525179856],["2018-03-12",18.99359999999988],["2018-03-13",18.99311475409824],["2018-03-14",18.99311475409824],["2018-03-15",18.99294117647046],["2018-03-16",18.99272727272716],["2018-03-17",18.99387173396662],["2018-03-18",18.99366292134818],["2018-03-19",18.9923456790122]]}];
    loadData(jsonData, '1', 'Column');
  });

  // get data 2
  $.ajax({
    url: 'path to data',
    dataType: 'json'
  }).done(function (jsonData) {
    loadData(jsonData);
  }).fail(function (jqXHR, textStatus, errorThrown) {
    var jsonData = [["product1",3.6126719999999977],["product2",6.827597999999999],["product2",1008.0]];
    loadData(jsonData, '2', 'Pie');
  });

  // load json data
  function loadData(jsonData, id, chartType) {
    // create data table
    var dataTable = new google.visualization.DataTable();

    switch (chartType) {
      case 'Column':
        // add date column
        dataTable.addColumn('date', 'Date');

        $.each(jsonData, function(productIndex, product) {
          // add product column
          var colIndex = dataTable.addColumn('number', product.name);

          // add product data
          $.each(product.data, function(dataIndex, data) {
            var rowIndex = dataTable.addRow();
            dataTable.setValue(rowIndex, 0, new Date(data[0]));
            dataTable.setValue(rowIndex, colIndex, data[1]);
          });
        });
        break;

      case 'Pie':
        // add product columns
        dataTable.addColumn('string', 'Product');
        dataTable.addColumn('number', 'Value');

        $.each(jsonData, function(productIndex, product) {
          // add product data
          dataTable.addRow([
            product[0],
            product[1],
          ]);
        });
        break;
    }

    // draw chart
    $(window).resize(function () {
      drawChart(id, chartType, dataTable);
    });
    drawChart(id, chartType, dataTable);
  }

  // save charts for redraw
  var charts = {};
  var options = {
    Column: {
      chartArea: {
        height: '100%',
        width: '100%',
        top: 64,
        left: 64,
        right: 32,
        bottom: 48
      },
      height: '100%',
      legend: {
        position: 'top'
      },
      pointSize: 4,
      width: '100%'
    },
    Pie: {
      height: '100%',
      width: '100%'
    }
  };

  // draw chart
  function drawChart(id, chartType, dataTable) {
    if (!charts.hasOwnProperty(id)) {
      charts[id] = new google.visualization.ChartWrapper({
        chartType: chartType + 'Chart',
        containerId: 'chart-' + id,
        options: options[chartType]
      });
    }
    charts[id].setDataTable(dataTable);
    charts[id].draw();
  }
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

.chart {
  display: inline-block;
  height: 100%;
  width: 32%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart-0"></div>
<div class="chart" id="chart-1"></div>
<div class="chart" id="chart-2"></div>

---

编辑 3

评论中提到的日期问题与 javascript 从字符串中解析日期的方式有关，
看到这个答案 --> Why does Date.parse give incorrect results?

根据使用的格式，可能会解析为当地时间或UTC

运行以下sn-p，注意控制台中打印的每个日期的结果有何不同...

console.log('2018-03-01 = ', new Date('2018-03-01'));
console.log('03/01/2018 = ', new Date('03/01/2018'));

要纠正这个问题，请使用这种格式 --> 03/01/2018

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  // save charts for redraw
  var charts = {};
  var options = {
    Column: {
      chartArea: {
        height: '100%',
        width: '100%',
        top: 64,
        left: 64,
        right: 32,
        bottom: 48
      },
      height: '100%',
      legend: {
        position: 'top'
      },
      pointSize: 4,
      width: '100%'
    },
    Pie: {
      height: '100%',
      width: '100%'
    }
  };

  // get data
  var jsonData = [{"name":"product a","data":[["03/01/2018",18.89034482758612],["03/02/2018",18.89268292682916],["03/05/2018",18.89324503311252],["03/07/2018",18.89268292682916],["03/10/2018",18.89377777777766],["03/11/2018",18.893525179856],["03/12/2018",18.89359999999988],["03/13/2018",18.89311475409824],["03/14/2018",18.89311475409824],["03/15/2018",18.89294117647046],["03/16/2018",18.89272727272716],["03/17/2018",18.89387173396662],["03/18/2018",18.89366292134818],["03/19/2018",18.8923456790122]]},{"name":"product b","data":[["03/01/2018",18.89034482758612],["03/02/2018",18.89268292682916],["03/05/2018",18.89324503311252],["03/07/2018",18.89268292682916],["03/10/2018",18.89377777777766],["03/11/2018",18.893525179856],["03/12/2018",18.89359999999988],["03/13/2018",18.89311475409824],["03/14/2018",18.89311475409824],["03/15/2018",18.89294117647046],["03/16/2018",18.89272727272716],["03/17/2018",18.89387173396662],["03/18/2018",18.89366292134818],["03/19/2018",18.8923456790122]]}];
  loadData(jsonData, '0', 'Column');

  // load json data
  function loadData(jsonData, id, chartType) {
    // create data table
    var dataTable = new google.visualization.DataTable();

    switch (chartType) {
      case 'Column':
        // add date column
        dataTable.addColumn('date', 'Date');

        $.each(jsonData, function(productIndex, product) {
          // add product column
          var colIndex = dataTable.addColumn('number', product.name);

          // add product data
          $.each(product.data, function(dataIndex, data) {
            var rowIndex = dataTable.addRow();
            dataTable.setValue(rowIndex, 0, new Date(data[0]));
            dataTable.setValue(rowIndex, colIndex, data[1]);
          });
        });
        break;

      case 'Pie':
        // add product columns
        dataTable.addColumn('string', 'Product');
        dataTable.addColumn('number', 'Value');

        $.each(jsonData, function(productIndex, product) {
          // add product data
          dataTable.addRow([
            product[0],
            product[1],
          ]);
        });
        break;
    }

    // draw chart
    $(window).resize(function () {
      drawChart(id, chartType, dataTable);
    });
    drawChart(id, chartType, dataTable);
  }

  // draw chart
  function drawChart(id, chartType, dataTable) {
    if (!charts.hasOwnProperty(id)) {
      charts[id] = new google.visualization.ChartWrapper({
        chartType: chartType + 'Chart',
        containerId: 'chart-' + id,
        options: options[chartType]
      });
    }
    charts[id].setDataTable(dataTable);
    charts[id].draw();
  }
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

.chart {
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart-0"></div>