Fatal编程技术网
  • javascript/
  • Javascript 将Google柱形图数据调整为小块

Javascript 将Google柱形图数据调整为小块

javascript html jquery charts google-visualization

Javascript 将Google柱形图数据调整为小块,javascript,html,jquery,charts,google-visualization,Javascript,Html,Jquery,Charts,Google Visualization,我已经绘制了谷歌图表如下（请输入图片）。 有没有什么方法可以让我一次显示5年图表，然后用滑块调整剩下的图表 <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript&qu

我已经绘制了谷歌图表如下（请输入图片）。 有没有什么方法可以让我一次显示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>


load（'current'，{'packages'：['bar']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[“年度”、“销售额”、“费用”、“利润”]，
['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]
]);
变量选项={
图表：{
标题：“公司业绩”，
副标题：“销售、费用和利润：2000-2020”，
}
};
var chart=new google.charts.Bar（document.getElementById（'columnchart_material'）；
绘制（数据，google.charts.Bar.convertOptions（选项））；
}
我想先显示2000-2005年的数据，然后是2006-2010年、2011-2015年，最后是2016-2020年。

我们可以使用谷歌的来绘制带有范围过滤器的图表

我们用图表来绘制图表

  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'
      }
    })
  });
和创建
定义范围过滤器时，可以设置初始
状态
属性
显示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
      }
    }
  });
我们使用将两者绑定在一起并绘制仪表板

var dashboard=new google.visualization.dashboard( document.getElementById（'仪表板'） ); 仪表板绑定（控件、图表）； 仪表盘.绘图（数据）

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

dashboard.bind([control1, control2], [chart1, chart2]);
唯一的实际区别是，范围筛选器必须设置为数字或日期列。
它不能使用字符串列

因此，我们必须将数据中的第一列更改为数字（
2001
）vs字符串（
'2001'
）

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

google.charts.load（'47'{
包：['controls'，'bar']
}).然后（函数（）{
var data=google.visualization.arrayToDataTable([
[“年度”、“销售额”、“费用”、“利润”]，
[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({
图表类型：“条形图”，
集装箱：“柱形图\材料”，
选项：google.charts.Bar.convertOptions({
图表：{
标题：“公司业绩”，
副标题：“销售、费用和利润：2000-2020”，
},
哈克斯：{
格式：'0000'
}
})
});
var control=new google.visualization.ControlWrapper({
controlType:“ChartRangeFilter”，
containerId:“控制范围过滤器”，
选项：{
filterColumnIndex:0，
用户界面：{
图表选项：{
哈克斯：{
格式：'0000'
}
}
}
},
声明：{
范围：{
开始日期：2000年，
完二〇〇五年
}
}
});
var dashboard=new google.visualization.dashboard(
document.getElementById（'仪表板'）
);
仪表板绑定（控件、图表）；
仪表盘.绘图（数据）；
window.addEventListener（'resize'，函数（）{
仪表盘.绘图（数据）；
});
});

html，正文{
身高：100%；
保证金：0px 0px 0px 0px；
溢出：隐藏；
填充：0px 0px 0px 0px；
}
#仪表板{
身高：100%；
}
#柱形图{
身高：80%；
}
#控制范围过滤器{
身高：20%；
}




我不确定自己是否理解期望的结果。您希望同时只能显示5年，并且能够选择并更改要显示的时间间隔吗？你能提供一个期望结果的样本吗？这个问题有什么好结果吗？请用投票按钮旁边的复选标记将答案标记为已接受，好吗？这将允许我将其他问题标记为此问题的副本。。。