时间戳

首页 > 解决方案 > 谷歌图表 - 多个折线图数据表，每个图表都有隐藏线

javascript - 谷歌图表 - 多个折线图数据表，每个图表都有隐藏线

问题描述

我试图用一个控制器构建一个仪表板来控制多个图表。一切正常，但是当我想在每个图表上显示不同的列时，事情就不行了。

这是什么错误的片段 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 只显示红线。

将不胜感激更多的帮助。谢谢。

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

快速跟进：所以我知道仪表板不能很好地与数据视图一起使用，所以我尝试跳过它们，但它仍然不起作用：

    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>

知道为什么现在吗？

标签： javascriptgoogle-visualization

解决方案

它应该可以工作，但是将图表包装器和视图一起使用时会出现错误

您所能做的就是创建视图，然后在绘图之前将其转换回数据表 

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>

注意：您需要提供自己的颜色。
默认情况下，每个系列都分配有特定的颜色，
如果图表由于视图而只有一列，则第一个为蓝色，无论它是哪一列

推荐阅读