Google LineChart: issue with line graph combine 3 data array in one chart possible?

问题

i need graph look like this way below x axis product name 1 X axis : date 2. y axis : cost 3. line points should be a product name

google.charts.load('current', {
    packages: ['corechart']
  }).then(function () {
    var charts = {};
    var options = {
      Column: {
        chartArea: {
          height: '100%',
          width: '100%',
          top: 24,
          left: 64,
          right: 32,
          bottom: 48,
        },
        tooltip: {
          valueDecimals: 2,
          valueSuffix: ' USD',
          valuePrefix: '$'
        },
        'vAxis': { 
          title: 'Cost in USD ($)', format:'$#',
        },
        height: '100%',
        legend: {
          position: 'bottom'
        },
        pointSize: 4,
        width: '100%'
      },
   
};
  //  columns charts data
  var jsonData = [["2017-01-01", 83578], ["2017-02-01", 208529], ["2017-03-01", 211377], ["2017-04-01", 215149], ["2017-05-01", 215149]];
  loadData(jsonData, '1', 'Line');
  var data2 = [["2017-02-01", 332], ["2017-03-01", 341], ["2017-04-01", 339], ["2017-05-01", 339]]; 
 
  // load json data
  function loadData(jsonData, id, chartType) {
    // create data table
  var dataTable = new google.visualization.DataTable();
 
    switch (chartType) {

       case 'Line':
       
      var chartData = [];
        chartData.push(['date', 'Cost']);
        jsonData.forEach(function (row) {
        chartData.push([row[0], parseFloat(row[1])]);
        });

  var dataTable = google.visualization.arrayToDataTable(chartData);
    // drawChart();
    
     
   // var chartData = [];
      //  chartData.push(['date', 'Cost']);
      //  data2.forEach(function (row) {
     //   chartData.push([row[0], parseFloat(row[1])]);
   //     });

  //var dataTable = google.visualization.arrayToDataTable(chartData);
    
    //var joinedData = google.visualization.data.join(data1, data2, 'full', [[0, 0]], [1], [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-1"></div>

i get data from one varible but how to join all varbile data in one chart ?? data as category1(pro1) = [["2017-02-01", 332], ["2017-03-01", 341], ["2017-04-01", 339], ["2017-05-01", 339]]

category2(pro2) = [["2017-01-01", 83578], ["2017-02-01", 208529], ["2017-03-01", 211377], ["2017-04-01", 215149], ["2017-05-01", 215149]]

category3(pro3) =[["2017-01-01", 618185], ["2017-03-01", 735490], ["2017-04-01", 642381]] category4(pro4) = [["2017-01-01", 3299]]

回答1:

add a column to the chart's data table for each array,
add a row for each element in the arrays,
then group the data table on date...

for labels, create an array of the names,
just be sure there are the same number of labels as there are data arrays...

var names = ['Aws', 'Azure', 'Other 1', 'Other 2'];

then...

// add category column
var colIndex = dataTable.addColumn('number', names[categoryIndex]);

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  // save charts for redraw
  var charts = {};

  // combine data into array
  var jsonData = [];
  var category1 = [["2017-02-01", 332], ["2017-03-01", 341], ["2017-04-01", 339], ["2017-05-01", 339]];
  var category2 = [["2017-01-01", 83578], ["2017-02-01", 208529], ["2017-03-01", 211377], ["2017-04-01", 215149], ["2017-05-01", 215149]];
  var category3 = [["2017-01-01", 618185], ["2017-03-01", 735490], ["2017-04-01", 642381]];
  var category4 = [["2017-01-01", 3299]];
  var names = ['Aws', 'Azure', 'Other 1', 'Other 2'];
  jsonData.push(category1);
  jsonData.push(category2);
  jsonData.push(category3);
  jsonData.push(category4);

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

  var aggColumns = [];
  $.each(jsonData, function(categoryIndex, category) {
    // add category column
    var colIndex = dataTable.addColumn('number', names[categoryIndex]);
    aggColumns.push({
      aggregation: google.visualization.data.sum,
      column: colIndex,
      label: dataTable.getColumnLabel(colIndex),
      type: dataTable.getColumnType(colIndex)
    });

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

  // group data
  var dataTable = google.visualization.data.group(
    dataTable,
    [0],
    aggColumns
  );

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

  // draw chart
  function drawChart(id, dataTable) {
    if (!charts.hasOwnProperty(id)) {
      charts[id] = new google.visualization.ChartWrapper({
        chartType: 'LineChart',
        containerId: 'chart-' + id
      });
    }
    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>

来源：https://stackoverflow.com/questions/50140291/google-linechart-issue-with-line-graph-combine-3-data-array-in-one-chart-possib