Столбиковая диаграмма визуализации google с двумя столбцами

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

 var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

Как сделать так, чтобы шкала расходов и прибыли была уложена, а продажи - это отдельная шкала?


google-visualization stacked-chart bar-chart
person mpsbhat    schedule 16.06.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

На данный момент API Google Charts не имеет этой встроенной функции, но с некоторым изменением параметров DataTable и Chart вы все еще можете добиться этого.

Мое решение

Столбец с накоплением должен содержать значения только расходов и прибыли, чтобы избежать столбца с накоплением с продажами, значение в столбце данных для продаж представлено как ноль. Отдельная полоса продаж создается с помощью аналогичной строки данных, но со значением «Продажи», а остальное - нулевым. Тип данных «Дата» необходимо указать, чтобы сгруппировать все гистограммы с одной и той же датой, если это не реализовано, то будет разрыв между каждой гистограммой с тем же годом. Дополнительная информация о представлении даты в столбцах доступна на здесь.

var data = google.visualization.arrayToDataTable([
    [ {label: 'Year', id: 'year', type: 'date'},
      {label: 'Sales', id: 'Sales', type: 'number'}, 
      {label: 'Expenses', id: 'Expenses', type: 'number'},
      {label: 'Profit', id: 'Profit', type: 'number'}],
      [{v:new Date('2014'), f:'2014'}, 0, 400, 200],
      [{v:new Date('2014'), f:'2014'}, 1000, 0, 0],
      [{v:new Date('2015'), f:'2015'}, 0, 460, 250],
      [{v:new Date('2015'), f:'2015'}, 1170, 0, 0],
      [{v:new Date('2016'), f:'2016'}, 0, 1120, 300],
      [{v:new Date('2016'), f:'2016'}, 600, 0, 0],
      [{v:new Date('2017'), f:'2017'}, 0, 540, 350],
      [{v:new Date('2017'), f:'2017'}, 1030, 0, 0]
    ]);

Чтобы получить полосу с накоплением, используется параметр конфигурации isStacked: true Google диаграмм. Чтобы вертикальная ось не действовала как временная шкала с месяцами и днями, вертикальная ось отформатирована для отображения года с помощью vAxis: {format: 'yyyy'}. Дополнительная информация о форматировании доступна здесь . Чтобы избежать интервалов между разными полосами года, используется функция bar: {groupWidth: '90%'}.

var options = {
      chart: {
        title: 'Company Performance',
        subtitle: 'Sales, Expenses, and Profit: 2014-2017',
      },
      bars: 'horizontal', // Required for Material Bar Charts.
      hAxis: {format: 'decimal'},
      vAxis: {
        format: 'yyyy'
      },
      height: 400,
      colors: ['#1b9e77', '#d95f02', '#7570b3'],
      isStacked: true,
      bar: {groupWidth: '90%'}
    };
person RH7    schedule 16.06.2016