Диаграмма Google - более 1 столбца различий

ProgramBox

Диаграмма Google — более 1 столбца различий

Post author:admin
Запись опубликована:1 декабря, 2022
Post category:Вопросы по программированию

#charts #bar-chart #overlapping #stacked #google-barchart

#javascript #typescript #Диаграммы #google-визуализация

Вопрос:

В Google Charts вы можете создать диаграмму различий, которая даст вам хорошее представление данных, показав 1 ряд данных перед другим, например

Проблема в том, что мне нужно сделать это более чем с 2 сериями, я бы хотел сделать это до 4, укладывая каждый элемент друг перед другом. Возможно ли это с помощью Google Charts?? Меня не волнует, нужно ли мне использовать разные диаграммы Google для достижения этой цели, но мне нужны 4 ряда друг перед другом, А НЕ рядом

Вот пример plunkr, но он сравнивает только 2 первых набора данных

http://jsfiddle.net/Gillardo/nv8kb58y/5/

 function drawChart() {
    var oldData = google.visualization.arrayToDataTable([
      ['Name', 'Popularity'],
      ['Cesar', 250],
      ['Rachel', 4200],
      ['Patrick', 2900],
      ['Eric', 8200]
    ]);

    var newData = google.visualization.arrayToDataTable([
      ['Name', 'Popularity'],
      ['Cesar', 370],
      ['Rachel', 600],
      ['Patrick', 700],
      ['Eric', 1500]
    ]);

    var thirdData = google.visualization.arrayToDataTable([
      ['Name', 'Popularity'],
      ['Cesar', 100],
      ['Rachel', 100],
      ['Patrick', 100],
      ['Eric', 100]
    ]);

    var colChartDiff = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    var options = { legend: { position: 'top' } };
    var diffData = colChartDiff.computeDiff(oldData, newData);
    var diffData2 = colChartDiff.computeDiff(diffData, thirdData);
    colChartDiff.draw(diffData, options);

    console.log(diffData2);
  }

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);

Ответ №1:

computeDiff метод будет оценивать только два набора данных

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

расположите все контейнеры диаграммы в одних и тех же координатах
используйте отдельные параметры диаграммы для изменения цвета и размера столбцов
, установленных vAxis.viewWindow на всех диаграммах
, удалите повторяющиеся метки (ось x в данных, отметки на оси y и т. Д.)

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

Пример с 3

Показать фрагмент кода

 google.charts.load('current', {
  packages: ['bar', 'controls', 'corechart']
}).then(function () {
  var data0 = google.visualization.arrayToDataTable([
    ['Name', 'Popularity 0'],
    ['Cesar', 250],
    ['Rachel', 4200],
    ['Patrick', 2900],
    ['Eric', 8200]
  ]);

  var data1 = google.visualization.arrayToDataTable([
    ['Name', 'Popularity 1'],
    ['', 370],
    ['', 600],
    ['', 700],
    ['', 1500]
  ]);

  var data2 = google.visualization.arrayToDataTable([
    ['Name', 'Popularity 2'],
    ['', 1370],
    ['', 1600],
    ['', 1700],
    ['', 500]
  ]);

  var options0 = {
    backgroundColor: 'transparent',
    colors: ['red'],
    height: 400,
    legend: {
      position: 'top'
    },
    vAxis: {
      viewWindow: {
        min: 0,
        max: 10000
      }
    },
    width: 600
  };

  var options1 = {
    backgroundColor: 'transparent',
    bar: {
      groupWidth: 40
    },
    colors: ['blue'],
    height: 400,
    legend: {
      position: 'top',
      alignment: 'center'
    },
    vAxis: {
      ticks: [{v: 0, f: ''}],
      viewWindow: {
        min: 0,
        max: 10000
      }
    },
    width: 600
  };

  var options2 = {
    backgroundColor: 'transparent',
    bar: {
      groupWidth: 20
    },
    colors: ['green'],
    height: 400,
    legend: {
      position: 'top',
      alignment: 'end'
    },
    vAxis: {
      ticks: [{v: 0, f: ''}],
      viewWindow: {
        min: 0,
        max: 10000
      }
    },
    width: 600
  };

  var colChart0 = new google.visualization.ColumnChart(document.getElementById('chart_div_0'));
  var colChart1 = new google.visualization.ColumnChart(document.getElementById('chart_div_1'));
  var colChart2 = new google.visualization.ColumnChart(document.getElementById('chart_div_2'));

  colChart0.draw(data0, options0);
  colChart1.draw(data1, options1);
  colChart2.draw(data2, options2);
});

 .chart {
  position: absolute;
  left: 0px;
  top: 0px;
}

 <script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart_div_0"></div>
<div class="chart" id="chart_div_1"></div>
<div class="chart" id="chart_div_2"></div>

Развернуть фрагмент

Пример с 4

 google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data0 = google.visualization.arrayToDataTable([
    ['Name', 'Popularity 0'],
    ['Cesar', 250],
    ['Rachel', 4200],
    ['Patrick', 2900],
    ['Eric', 8200]
  ]);

  var data1 = google.visualization.arrayToDataTable([
    ['Name', 'Popularity 1'],
    ['', 370],
    ['', 600],
    ['', 700],
    ['', 1500]
  ]);

  var data2 = google.visualization.arrayToDataTable([
    ['Name', 'Popularity 2'],
    ['', 1370],
    ['', 1600],
    ['', 1700],
    ['', 500]
  ]);

  var data3 = google.visualization.arrayToDataTable([
    ['Name', 'Popularity 3'],
    ['', 1070],
    ['', 1200],
    ['', 1000],
    ['', 900]
  ]);

  var chartColors = ['#f44336', '#9c27b0', '#2196f3', '#4caf50'];

  var options0 = {
    backgroundColor: 'transparent',
    colors: [chartColors[0]],
    height: 400,
    legend: {
      position: 'top',
      alignment: 'center'
    },
    vAxis: {
      viewWindow: {
        min: 0,
        max: 10000
      }
    },
    width: 600
  };

  var options1 = {
    backgroundColor: 'transparent',
    bar: {
      groupWidth: 40
    },
    colors: [chartColors[1]],
    height: 400,
    legend: {
      position: 'top',
      alignment: 'center'
    },
    vAxis: {
      ticks: [{v: 0, f: ''}],
      viewWindow: {
        min: 0,
        max: 10000
      }
    },
    width: 600
  };

  var options2 = {
    backgroundColor: 'transparent',
    bar: {
      groupWidth: 20
    },
    colors: [chartColors[2]],
    height: 400,
    legend: {
      position: 'top',
      alignment: 'center'
    },
    vAxis: {
      ticks: [{v: 0, f: ''}],
      viewWindow: {
        min: 0,
        max: 10000
      }
    },
    width: 600
  };

  var options3 = {
    backgroundColor: 'transparent',
    bar: {
      groupWidth: 10
    },
    colors: [chartColors[3]],
    height: 400,
    legend: {
      position: 'top',
      alignment: 'center'
    },
    vAxis: {
      ticks: [{v: 0, f: ''}],
      viewWindow: {
        min: 0,
        max: 10000
      }
    },
    width: 600
  };

  var colChart0 = new google.visualization.ColumnChart(document.getElementById('chart_div_0'));
  var colChart1 = new google.visualization.ColumnChart(document.getElementById('chart_div_1'));
  var colChart2 = new google.visualization.ColumnChart(document.getElementById('chart_div_2'));
  var colChart3 = new google.visualization.ColumnChart(document.getElementById('chart_div_3'));

  google.visualization.events.addListener(colChart0, 'ready', function () {
    adjustLegend(colChart0);
  });
  google.visualization.events.addListener(colChart1, 'ready', function () {
    adjustLegend(colChart1);
  });
  google.visualization.events.addListener(colChart2, 'ready', function () {
    adjustLegend(colChart2);
  });
  google.visualization.events.addListener(colChart3, 'ready', function () {
    adjustLegend(colChart3);
  });

  colChart0.draw(data0, options0);
  colChart1.draw(data1, options1);
  colChart2.draw(data2, options2);
  colChart3.draw(data3, options3);

  function adjustLegend(chart, index) {
    var chartContainer;
    var chartId;
    var chartLabels;
    var chartLayout = chart.getChartLayoutInterface();
    var chartBounds = chartLayout.getChartAreaBoundingBox();
    var labelBounds = chartLayout.getBoundingBox('legendentry#0');
    var legendMarkers;
    var offsetX;
    var offsetY;

    switch (chart) {
      case colChart0:
        chartId = 'chart_div_0';
        offsetX = labelBounds.width * -1;
        offsetY = labelBounds.height * -1;
        break;

      case colChart1:
        chartId = 'chart_div_1';
        offsetX = labelBounds.width;
        offsetY = labelBounds.height * -1;
        break;

      case colChart2:
        chartId = 'chart_div_2';
        offsetX = labelBounds.width * -1;
        offsetY = labelBounds.height;
        break;

      case colChart3:
        chartId = 'chart_div_3';
        offsetX = labelBounds.width;
        offsetY = labelBounds.height;
        break;
    }

    chartContainer = document.getElementById(chartId);

    chartLabels = chartContainer.getElementsByTagName('text');
    Array.prototype.forEach.call(chartLabels, function(label) {
      if (label.getAttribute('text-anchor') === 'start') {
        label.setAttribute('x', parseFloat(label.getAttribute('x'))   offsetX);
        label.setAttribute('y', parseFloat(label.getAttribute('y'))   offsetY);
      }
    });

    legendMarkers = chartContainer.getElementsByTagName('rect');
    Array.prototype.forEach.call(legendMarkers, function(rect) {
      if ((chartColors.indexOf(rect.getAttribute('fill')) > -1) amp;amp; (parseFloat(rect.getAttribute('y')) < chartBounds.top)) {
        rect.setAttribute('x', parseFloat(rect.getAttribute('x'))   offsetX);
        rect.setAttribute('y', parseFloat(rect.getAttribute('y'))   offsetY);
        //console.log(chartId, rect);
      }
    });
  }
});

 .chart {
  position: absolute;
  left: 0px;
  top: 0px;
}

 <script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart_div_0"></div>
<div class="chart" id="chart_div_1"></div>
<div class="chart" id="chart_div_2"></div>
<div class="chart" id="chart_div_3"></div>

Развернуть фрагмент

1. во-первых, спасибо за отличный пример! Одна вещь, которую я заметил, это то, что ваша легенда идеально подходит для 3 элементов (один левый, один средний, один правый), но что, если бы было 4 набора данных? Я бы хотел увеличить максимум до 4….

2. Вы можете изменить атрибут ‘x’ на метке, когда срабатывает событие ‘ready’ диаграммы…

3. Я еще не реализовал это, как только я это сделаю (очень скоро), я отмечу ваш ответ. Отлично, если бы вы могли привести пример с 4 графиками и показать исправление легенды: D

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

Метки: Диаграмма Google — более 1 столбца различий

Вопрос:

Ответ №1:

Комментарии:

Вам также может понравиться

Масштабирование фонового изображения до размера элемента

кавычки javascript (jquery)-html-php

Не удалось разобрать остаток: ‘ _json’ из ‘room_name _json’