Google LineChart: проблема с линейным графиком объединить 3 массива данных в одну диаграмму возможно? - PullRequest
Новая
       8

Google LineChart: проблема с линейным графиком объединить 3 массива данных в одну диаграмму возможно?

0 голосов
/ 02 мая 2018

мне нужно, чтобы график выглядел следующим образом под названием оси X 1 ось X: дата 2. ось y: стоимость 3. точки линии должны быть названием продукта enter image description here

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>

я получаю данные из одной переменной, но как объединить все данные varbile в одну диаграмму ?? данные как категория1 (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 Ответ

0 голосов
/ 03 мая 2018

добавить столбец в таблицу данных диаграммы для каждого массива,
добавить строку для каждого элемента в массивах,
затем сгруппировать таблицу данных по дате ...

для меток, создать массив имен,
просто убедитесь, что количество меток совпадает с количеством массивов данных ... 

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