时间戳

首页 > 解决方案 > 小块调整谷歌柱形图数据

javascript - 小块调整谷歌柱形图数据

问题描述

我已经绘制了谷歌图表如下（请输入图片）在此处输入图片描述。有什么方法可以一次显示 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 年的数据。

标签： javascripthtmljquerychartsgoogle-visualization

解决方案

我们可以使用谷歌的控件和仪表板来绘制带有附加范围过滤器的图表。

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

  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类创建ChartRangeFilter控件
我们在定义范围过滤器的时候，我们可以设置initialstate属性，
来显示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 类将两者绑定在一起并绘制仪表板。

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

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

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

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

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

请参阅以下工作片段...
（使用片段顶部的完整页面链接）

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>

推荐阅读