简体   繁体   English

如何修改谷歌图表列的条形宽度?

[英]How to modify bar width of google chart column?

How I can modify the size of bar width of google chart column?如何修改谷歌图表列的条形宽度大小? I tried to add 'bar: { groupWidth: "20%" }' but it does nothing to the chart.我试图添加 'bar: { groupWidth: "20%" }' 但它对图表没有任何作用。

在此处输入图片说明

I really wanted it to make it thinner.我真的想让它变薄。

Here is the code that I want to use from google chart:这是我想从谷歌图表使用的代码:

<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'],
          ['2017', 1030, 540, 350]
        ]);

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

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

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

According to the documentation ,根据文档

The Material Charts are in beta.材料图表处于测试阶段。 The appearance and interactivity are largely final, but many of the options available in Classic Charts are not yet available in them.外观和互动性在很大程度上是最终的,但许多经典图表可用的选项则尚未它们可用。 You can find a list of options that are not yet supported in this issue .您可以在此问题中找到尚不支持的选项列表。

One of these options is the bar.groupWidth , which seems to not have support yet.这些选项之一是bar.groupWidth ,它似乎还没有支持。

In this case, since you are working with a group of bars and there's only one array of information in data :在这种情况下,由于您正在处理一组条形,并且data只有一个信息数组:

['2017', 1030, 540, 350]

then that option doesn't seem to work.那么该选项似乎不起作用。 However, if there were two or more groups, it seemed to render but in a limited way.但是,如果有两个或更多组,它似乎以有限的方式呈现。 This said, I was able to find some workarounds, each one with its own positive aspects and drawbacks.这就是说,我能够找到一些解决方法,每个方法都有自己的积极方面和缺点。

Change from Material Charts to Classical Charts从材料图表到经典图表的变化

Here you have to reconstruct the chart's code following the Classical one在这里,您必须按照经典代码重建图表的代码

  • Pros: options fully supported优点:完全支持选项
  • Cons: you will change from Material Charts to Classical Charts缺点:您将从材料图表更改为经典图表

 google.charts.load("current", { packages: ['corechart'] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Type', 'Financial status',{ role: "style" }], ["Sales", 1030, "#4285f4"], ["Expenses", 540, "#db4437"], ["Profit", 350, "f4b400"], ]); var view = new google.visualization.DataView(data); var options = { title: "Company Performance", subtitle: "Sales, Expenses, and Profit: 2017", width: 600, // chart width bar: { groupWidth: "45%" }, // width of bars here legend: { position: "none" }, }; var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values")); chart.draw(view, options); }
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="columnchart_values" style="width: 900px; height: 300px;"></div>

Separate that only group of bars into single bars将仅一组条形分离成单个条形

Put that only group bar in different arrays and adapt your labels将唯一的组栏放在不同的数组中并调整您的标签

  • Pros: the width will indeed change from 0 to 100% in groupWidth优点:宽度确实会在groupWidth从 0 变为 100%
  • Cons: looses colored bars缺点:松散彩色条

 google.charts.load('current', { 'packages': ['bar'] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Type', 'Financial status'], ["Sales", 1030], ["Expenses", 540], ["Profit", 350], ]); var options = { chart: { title: 'Company Performance', subtitle: 'Sales, Expenses, and Profit: 2017', }, bar: { groupWidth: '50%' }, // change width here width: 600, // width of the chart height: 400 // height of the chart }; var chart = new google.charts.Bar(document.getElementById('chart_div')); chart.draw(data, google.charts.Bar.convertOptions(options)); } google.charts.load('current', { 'packages': ['bar'] }); google.charts.setOnLoadCallback(drawChart);
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div" style="width: 900px; height: 300px;">

Use meaningless arrays使用无意义的数组

Put the array of information in the middle of two other meaningless arrays so that you center your main data and gives the impression将信息数组放在另外两个无意义数组的中间,以便您将主要数据居中并给人留下印象

  • Pros: still uses the Material Chart design优点:仍然使用 Material Chart 设计
  • Cons: stretches the bars, doesn't provide space between bars缺点:拉伸钢筋,不提供钢筋之间的空间

 google.charts.load('current', { 'packages': ['bar'] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses', 'Profit'], [' ', 0, 0, 0], // meaningless ['2017', 1030, 540, 350], [' ', 0, 0, 0] // meaningless ]); var options = { chart: { title: 'Company Performance', subtitle: 'Sales, Expenses, and Profit: 2017', }, bar: { groupWidth: '90%' }, // change width of bar here, width: 600, // width of the chart height: 400, // height of the chart }; var chart = new google.charts.Bar(document.getElementById('chart_div')); chart.draw(data, google.charts.Bar.convertOptions(options)); }
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div" style="width: 900px; height: 300px;">

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM