小块调整谷歌柱形图数据答案

【问题标题】：Adjust Google Column Chart Data in small chunks小块调整谷歌柱形图数据
【发布时间】：2020-07-23 12:34:53
【问题描述】：

我已经绘制了谷歌图表如下（请输入图片）enter image description here。有什么方法可以一次显示 5 年图表并在滑块中调整剩余图表。

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2001', 1001, 400, 200],
          ['2002', 1002, 400, 200],
          ['2003', 1003, 400, 200],
          ['2004', 1004, 400, 200],
          ['2005', 1005, 400, 200],
          ['2006', 1006, 400, 200],
          ['2007', 1007, 400, 200],
          ['2008', 1008, 400, 200],
          ['2009', 1009, 400, 200],
          ['2010', 1010, 400, 200],
          ['2011', 1011, 400, 200],
          ['2012', 1012, 400, 200],
          ['2013', 1013, 400, 200],
          ['2014', 1014, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350],
          ['2018', 1030, 540, 350],
          ['2019', 1030, 540, 350],
          ['2020', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2000-2020',
          }
        };

        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="columnchart_material" style="width: 800px; height: 500px;"></div>
  </body>
</html>

我想先显示 2000-2005 年的数据，然后显示 2006-2010 年、2011-2015 年和最后 2016-2020 年的数据。

【问题讨论】：

不确定我是否理解期望的结果。您希望只能同时显示 5 年，并且能够选择和更改显示的间隔吗？您能否提供预期结果的样本？

标签： javascript html jquery charts google-visualization

【解决方案1】：

我们可以使用谷歌的Controls and Dashboards 来绘制带有附加范围过滤器的图表。

我们使用ChartWrapper class来绘制图表。

  var chart = new google.visualization.ChartWrapper({
    chartType: 'Bar',
    containerId: 'columnchart_material',
    options: google.charts.Bar.convertOptions({
      chart: {
        title: 'Company Performance',
        subtitle: 'Sales, Expenses, and Profit: 2000-2020',
      },
      hAxis: {
        format: '0000'
      }
    })
  });

和ControlWrapper class 创建ChartRangeFilter control
当我们定义范围过滤器时，我们可以设置初始state属性，
显示 2000 - 2005 的初始范围

  var control = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control_range_filter',
    options: {
      filterColumnIndex: 0,
      ui: {
        chartOptions: {
          hAxis: {
            format: '0000'
          }
        }
      }
    },
    state: {
      range: {
        start: 2000,
        end : 2005
      }
    }
  });

我们使用Dashboard class将两者绑定在一起并绘制仪表板。

var 仪表板 = 新的 google.visualization.Dashboard( document.getElementById('dashboard') ); 仪表板.bind（控件，图表）；仪表盘.draw(数据);

您还可以在一个仪表板中拥有多个图表和控件。
只需将每个数组传递给绑定方法，例如

dashboard.bind([control1, control2], [chart1, chart2]);

唯一真正的区别是范围过滤器必须设置为数字或日期列。
它不能使用字符串列。

所以我们必须将数据中的第一列更改为数字 (2001) 与字符串 ('2001')...

请参阅以下工作 sn-p...
（使用 sn-p 顶部的整页链接）

google.charts.load('47', {
  packages: ['controls', 'bar']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses', 'Profit'],
    [2001, 1001, 400, 200],
    [2002, 1002, 400, 200],
    [2003, 1003, 400, 200],
    [2004, 1004, 400, 200],
    [2005, 1005, 400, 200],
    [2006, 1006, 400, 200],
    [2007, 1007, 400, 200],
    [2008, 1008, 400, 200],
    [2009, 1009, 400, 200],
    [2010, 1010, 400, 200],
    [2011, 1011, 400, 200],
    [2012, 1012, 400, 200],
    [2013, 1013, 400, 200],
    [2014, 1014, 400, 200],
    [2015, 1170, 460, 250],
    [2016, 660, 1120, 300],
    [2017, 1030, 540, 350],
    [2018, 1030, 540, 350],
    [2019, 1030, 540, 350],
    [2020, 1030, 540, 350]
  ]);

  var chart = new google.visualization.ChartWrapper({
    chartType: 'Bar',
    containerId: 'columnchart_material',
    options: google.charts.Bar.convertOptions({
      chart: {
        title: 'Company Performance',
        subtitle: 'Sales, Expenses, and Profit: 2000-2020',
      },
      hAxis: {
        format: '0000'
      }
    })
  });

  var control = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control_range_filter',
    options: {
      filterColumnIndex: 0,
      ui: {
        chartOptions: {
          hAxis: {
            format: '0000'
          }
        }
      }
    },
    state: {
      range: {
        start: 2000,
        end : 2005
      }
    }
  });

  var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard')
  );

  dashboard.bind(control, chart);
  dashboard.draw(data);
  window.addEventListener('resize', function () {
    dashboard.draw(data);
  });
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

#dashboard {
  height: 100%;
}

#columnchart_material {
  height: 80%;
}

#control_range_filter {
  height: 20%;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
  <div id="columnchart_material"></div>
  <div id="control_range_filter"></div>
</div>

【讨论】：

这个问题好运吗？请您使用投票按钮附近的复选标记将答案标记为已接受吗？这将允许我将其他问题标记为与此问题重复...