Диаграмма Google, цвет фона для каждой группы - PullRequest
Новая
       124

Диаграмма Google, цвет фона для каждой группы

1 голос
/ 10 июля 2020

Мне нужно создать диаграмму, которая должна быть сгруппирована по 7 записям / столбцам. Я сделал это, как показано ниже. Но мне нужен цвет фона для каждой группы. Поэтому я попытался использовать chartArea: {width: '100%', backgroundColor: 'silver'} и backgroundColor: 'silver', но он применяет цвет ко всей области диаграммы и диаграмме, но не к каждой группе.

Также я видел визуализированный вывод, чтобы обернуть div/span вокруг для каждой группы применить CSS фон, но кажется невозможным обернуть, как я думал.

Есть ли способ применить цвет фона для каждой группы с пустым пространством между ними? Вот код: 

  google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawColumnChart);
    function drawColumnChart() {
      var data = google.visualization.arrayToDataTable([
        ['Date', 'Value',{ role: 'style' }, 'Value',{ role: 'style' }, 'Value', { role: 'style' }, 'Value', { role: 'style' }, 'Value', { role: 'style' }, 'Value', { role: 'style' }, 'Value', { role: 'style' }],
          ['1-7', 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],
          ['8-14', 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],
          ['15-21', 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],

        ]);

      var options = {
        legend: { position: "none" },
         vAxis: {
            gridlines: {
                color: 'transparent'
            }
         }, 
      };
        var container = document.getElementById('column-chart');
       var containerBounds = container.getBoundingClientRect();
      var chart = new google.visualization.ColumnChart(container);
        google.visualization.events.addListener(chart, 'ready', function () {
    var chartLayout = chart.getChartLayoutInterface();

  });
      chart.draw(data, options);
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>

    <div id="chart_container">

      <div id="column-chart" class="chart-div"></div>
    </div>

1 Ответ

1 голос
/ 10 июля 2020

мы можем использовать комбинированную диаграмму и использовать ряд областей в качестве фона.

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

однако мы можем использовать объектную нотацию, чтобы установить значение (v:) и отобразить форматированное значение (f:) 

{v: 1, f: '1-7'}

, мы также можем использовать указанное выше в наших отметках по оси x ... 

  ticks: [{v: 1, f: '1-7'}, {v: 3, f: '8-14'}, {v: 5, f: '15-21'}],

, поэтому мы устанавливаем группы полос на 1, 3 и 5. затем используйте ряд областей для фона в 0-2, 2-4 и 4-6.

сначала создайте таблицу данных, используя объектную нотацию для оси x. 

var data = google.visualization.arrayToDataTable([
  ['Date', 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}],
  [{v: 1, f: '1-7'}, 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],
  [{v: 3, f: '8-14'}, 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],
  [{v: 5, f: '15-21'}, 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],
]);

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

var colArea = data.addColumn('number', 'Area');
var colAreaStyle = data.addColumn({role: 'style', type: 'string'});

var row = data.addRow();
data.setValue(row, 0, 0);
data.setValue(row, colArea, 10);
data.setValue(row, colAreaStyle, 'cyan');
row = data.addRow();
data.setValue(row, 0, 2);
data.setValue(row, colArea, 10);
data.setValue(row, colAreaStyle, 'cyan');

row = data.addRow();
data.setValue(row, 0, 2);
data.setValue(row, colArea, 10);
data.setValue(row, colAreaStyle, 'magenta');
row = data.addRow();
data.setValue(row, 0, 4);
data.setValue(row, colArea, 10);
data.setValue(row, colAreaStyle, 'magenta');

row = data.addRow();
data.setValue(row, 0, 4);
data.setValue(row, colArea, 10);
data.setValue(row, colAreaStyle, 'lime');
row = data.addRow();
data.setValue(row, 0, 6);
data.setValue(row, colArea, 10);
data.setValue(row, colAreaStyle, 'lime');

в наших параметрах мы скрываем линии сетки по оси X, установите метки галочки и установите видимый диапазон. 

hAxis: {
  gridlines: {
    color: 'transparent'
  },
  ticks: [{v: 1, f: '1-7'}, {v: 3, f: '8-14'}, {v: 5, f: '15-21'}],
  viewWindow: {
    min: 0,
    max: 6
  }
},

и добавьте параметры для типов серий ... 

series: {
  7: {
    areaOpacity: 1,
    type: 'area'
  }
},
seriesType: 'bars',

см. следующий рабочий фрагмент ... 

google.charts.load("current", {
  packages: ['corechart']
});
google.charts.setOnLoadCallback(drawColumnChart);

function drawColumnChart() {
  var data = google.visualization.arrayToDataTable([
    ['Date', 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}],
    [{v: 1, f: '1-7'}, 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],
    [{v: 3, f: '8-14'}, 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],
    [{v: 5, f: '15-21'}, 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],
  ]);

  var colArea = data.addColumn('number', 'Area');
  var colAreaStyle = data.addColumn({role: 'style', type: 'string'});

  var row = data.addRow();
  data.setValue(row, 0, 0);
  data.setValue(row, colArea, 10);
  data.setValue(row, colAreaStyle, 'cyan');
  row = data.addRow();
  data.setValue(row, 0, 2);
  data.setValue(row, colArea, 10);
  data.setValue(row, colAreaStyle, 'cyan');

  row = data.addRow();
  data.setValue(row, 0, 2);
  data.setValue(row, colArea, 10);
  data.setValue(row, colAreaStyle, 'magenta');
  row = data.addRow();
  data.setValue(row, 0, 4);
  data.setValue(row, colArea, 10);
  data.setValue(row, colAreaStyle, 'magenta');

  row = data.addRow();
  data.setValue(row, 0, 4);
  data.setValue(row, colArea, 10);
  data.setValue(row, colAreaStyle, 'lime');
  row = data.addRow();
  data.setValue(row, 0, 6);
  data.setValue(row, colArea, 10);
  data.setValue(row, colAreaStyle, 'lime');

  var options = {
    hAxis: {
      gridlines: {
        color: 'transparent'
      },
      ticks: [{v: 1, f: '1-7'}, {v: 3, f: '8-14'}, {v: 5, f: '15-21'}],
      viewWindow: {
        min: 0,
        max: 6
      }
    },
    legend: {
      position: "none"
    },
    series: {
      7: {
        areaOpacity: 1,
        type: 'area'
      }
    },
    seriesType: 'bars',
    vAxis: {
      gridlines: {
        color: 'transparent'
      }
    },
  };

  var container = document.getElementById('column-chart');
  var chart = new google.visualization.ComboChart(container);
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_container">
  <div id="column-chart" class="chart-div"></div>
</div>
...