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

мне нужно, чтобы график выглядел так, как показано ниже, под названием продукта по оси x 1 ось X: дата 2. Ось Y: стоимость. 3. точки должны быть названием продукта. Google LineChart: возможна проблема с линейным графиком, объединяющим 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>

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

да объединить все отображение массива в одну диаграмму, например, с помощью объединения таблиц данных или чего-то еще?

yash041 03.05.2018 16:19

в каждом массиве есть своя линия на одном графике, возможно ли? с помощью таблицы данных присоединиться

yash041 03.05.2018 16:57
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
83
1

Ответы 1

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

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

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>

Благодарность !! как добавить название категории что-то вроде ярлыка category1 = Aws cateogry2 = Azure в легенде или всплывающих подсказках ??

yash041 03.05.2018 18:45

возможно ли какое-либо событие нажатия легенды в диаграммах Google, как и в диаграммах highcharts, например, когда я нажимаю aws, чем отображается только одна строка aws?

yash041 03.05.2018 19:41

не через стандартные функции, он выделяет строку только при нажатии ...

WhiteHat 03.05.2018 19:50

хорошо, нп .... это не работает, когда я добавляю с параметрами: {hAxis: {format: 'MMMM-yy',}}

yash041 03.05.2018 20:49
hAxis.format будет работать только со столбцами даты и номера, а не со строкой ...
WhiteHat 03.05.2018 21:14

Другие вопросы по теме