时间戳

首页 > 解决方案 > Google LineChart：折线图问题可能在一张图表中组合 3 个数据数组？

javascript - Google LineChart：折线图问题可能在一张图表中组合 3 个数据数组？

问题描述

我需要图表如下所示 x 轴产品名称 1 X 轴：日期 2. y 轴：成本 3. 线点应该是产品名称 在此处输入图像描述

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>

我从一个变量中获取数据，但是如何将所有变量数据加入一个图表中？数据为 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]]

标签： javascriptjquerychartsgoogle-visualization

解决方案

为每个数组在图表的数据表中
添加一列，为数组中的每个元素添加一行，
然后按日期对数据表进行分组...

对于标签，创建一个名称数组，
只要确保标签的数量与数据数组的数量相同...... 

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

然后... 

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

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

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>

推荐阅读