Диаграммы Google - множественные линейные диаграммы с возможностью скрытых линий для каждого графика - PullRequest
Новая
       18

Диаграммы Google - множественные линейные диаграммы с возможностью скрытых линий для каждого графика

0 голосов
/ 05 июня 2018

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

вот фрагмент того, что не так http://jsfiddle.net/hzdyojca/

таблица данных жестко закодирована во всех столбцахсуществует при инициализации: 

['Date', 'A2', 'A3', 'A4'],
[2004  , 3.5 , 5   , 4.4 ],
[2005  , 3.7 , 5   , 4.5 ],
[2006  , 3.7 , 5   , 4.6 ],
[2007  , 3.8 , 5   , 4.7 ]

Как видно на диаграмме A, столбцы 0 и 1 прекрасно представлены.Предполагается, что на диаграмме B заданы столбцы 0 и 2 (дата и A3), а на диаграмме C некоторые из них должны быть представлены вместе. 

        let chartB = new google.visualization.ChartWrapper({
        chartType: 'LineChart',
        options: options,
        containerId: 'chartB',
        view: {columns:[0,2]} //THIS DOESNT WORK
    });
    let chartC = new google.visualization.ChartWrapper({
        chartType: 'LineChart',
        options: options,
        containerId: 'chartC',
        view: {columns:[0,1,2,3]} //BUT THIS DOES WORK (OR EVEN [0,1,2])
    });

Я не понимаю, как заставить диаграмму B отображать только красный цветline.

был бы признателен за дополнительную помощь.спасибо.

======================================================================================

быстрое продолжение: так что я понял, что информационные панели не 'я не могу работать с dataviews, поэтому я попытался пропустить их, но это все равно не работает: 

    google.charts.load('current', {
        packages: ['corechart', 'controls']
    }).then(function () {
        var data = google.visualization.arrayToDataTable([
            ['Date', 'A2', 'A3', 'A4'],
            [2004, 3.5, 5, 4.4],
            [2005, 3.7, 5, 4.5],
            [2006, 3.7, 5, 4.6],
            [2007, 3.8, 5, 4.7]
        ]);
        var options = {
            legend: 'top',
            chartArea: {
                width: '85%',
                height: '85%'
            },
            pointSize: 3,
            dataOpacity: 0.8,
            animation: {
                duration: 1000,
                easing: 'in',
                startup: true
            }
        };
        var colors = ['#b71c1c', '#1565c0', '#2e7d32'];
        var chartA = new google.visualization.LineChart(document.getElementById('chartA'));
        var chartB = new google.visualization.LineChart(document.getElementById('chartB'));
        var chartC = new google.visualization.LineChart(document.getElementById('chartC'));
        var control = new google.visualization.ControlWrapper({
            controlType: 'ChartRangeFilter',
            containerId: 'control',
            dataTable: data,
            options: {
                filterColumnIndex: 0,
                ui: {
                    chartOptions: {
                        colors: colors
                    }
                }
            }
        });

        google.visualization.events.addListener(control, 'ready', drawCharts);
        google.visualization.events.addListener(control, 'statechange', drawCharts);

        control.draw();

        function drawCharts() {
            var filterState = control.getState();
            var filterRows = data.getFilteredRows([{
                column: 0,
                minValue: filterState.range.start,
                maxValue: filterState.range.end
            }]);

            var viewA = new google.visualization.DataView(data);
            var viewB = new google.visualization.DataView(data);
            var viewC = new google.visualization.DataView(data);
            viewA.setRows(filterRows);
            viewB.setRows(filterRows);
            viewC.setRows(filterRows);
            viewA.setColumns([0, 2]);
            viewB.setColumns([0, 2]);
            viewC.setColumns([0, 2]);
            chartA.draw(viewA,options);
            chartB.draw(viewB,options);
            chartC.draw(viewC,options);
        }
    });
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="control"></div>
<div id="chartA"></div>
<div id="chartB"></div>
<div id="chartC"></div>

есть идеи почему сейчас?

1 Ответ

0 голосов
/ 05 июня 2018

это должно работать, но есть ошибки при совместном использовании оболочек диаграммы и представлений

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

view.toDataTable()

, что означает, что вам нужно будет рисовать диаграммы независимо, вместо использования приборной панели
это можно сделать с помощью события statechange элемента управления

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

google.charts.load('current', {
  packages: ['corechart', 'controls']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Date', 'A2', 'A3', 'A4'],
    [2004, 3.5, 5, 4.4],
    [2005, 3.7, 5, 4.5],
    [2006, 3.7, 5, 4.6],
    [2007, 3.8, 5, 4.7]
  ]);
  var options = {
    legend: 'top',
    chartArea: {
      width: '85%',
      height: '85%'
    },
    pointSize: 3,
    dataOpacity: 0.8,
    animation: {
      duration: 1000,
      easing: 'in',
      startup: true
    }
  };
  var colors = ['#b71c1c', '#1565c0', '#2e7d32'];
  var chartA = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    options: options,
    containerId: 'chartA',
  });
  var chartB = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    options: options,
    containerId: 'chartB',
  });
  var chartC = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    options: options,
    containerId: 'chartC',
  });
  var control = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control',
    dataTable: data,
    options: {
      filterColumnIndex: 0,
      ui: {
        chartOptions: {
          colors: colors
        }
      }
    }
  });

  google.visualization.events.addListener(control, 'ready', drawCharts);
  google.visualization.events.addListener(control, 'statechange', drawCharts);

  control.draw();

  function drawCharts() {
    var filterState = control.getState();
    var filterRows = data.getFilteredRows([{
      column: 0,
      minValue: filterState.range.start,
      maxValue: filterState.range.end
    }]);

    var view = new google.visualization.DataView(data);
    view.setRows(filterRows);

    view.setColumns([0, 1]);
    chartA.setOption('colors', [colors[1]]);
    chartA.setDataTable(view.toDataTable());
    chartA.draw();

    view.setColumns([0, 2]);
    chartB.setOption('colors', [colors[2]]);
    chartB.setDataTable(view.toDataTable());
    chartB.draw();

    view.setColumns([0, 1, 2, 3]);
    chartC.setOption('colors', colors);
    chartC.setDataTable(view.toDataTable());
    chartC.draw();
  }
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dash">
  <div id="control"></div>
  <div id="chartA"></div>
  <div id="chartB"></div>
  <div id="chartC"></div>
</div>

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

...