如何修改谷歌图表列的条形宽度？答案

【问题标题】：How to modify bar width of google chart column?如何修改谷歌图表列的条形宽度？
【发布时间】：2021-11-12 11:00:35
【问题描述】：

如何修改谷歌图表栏的条宽大小？我尝试添加 'bar: { groupWidth: "20%" }' 但它对图表没有任何作用。

我真的想让它变得更薄。

这是我想从谷歌图表中使用的代码：

<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>

【问题讨论】：

你想只改变一列的宽度还是全部改变？
@testing_22 全部

标签： javascript html charts

【解决方案1】：

根据documentation，

材料图表处于测试阶段。外观和交互性在很大程度上是最终的，但经典图表中可用的许多选项不在其中可用。您可以在this issue 中找到尚不支持的选项列表。

其中一个选项是bar.groupWidth，它似乎还没有支持。

在这种情况下，由于您正在处理一组条形图，并且data 中只有一个信息数组：

['2017', 1030, 540, 350]

那么该选项似乎不起作用。但是，如果有两个或更多组，它似乎会以有限的方式呈现。也就是说，我能够找到一些解决方法，每一种都有其积极的方面和缺点。

从材料图表到经典图表的变化

这里你必须按照经典的代码重构图表的代码

优点：完全支持选项
缺点：您将从材料图表更改为经典图表

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>

将唯一的一组条分成单个条

将仅组栏放在不同的数组中并调整您的标签

优点：groupWidth 中的宽度确实会从 0 变为 100%
缺点：失去彩条

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;">

使用无意义的数组

把信息数组放在另外两个无意义数组的中间，这样以主要数据为中心并给人以印象

优点：仍然使用 Material Chart 设计
缺点：拉伸条形，不提供条形之间的空间

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;">

【讨论】：

谢谢你创造性的回答。我忘记在我的问题上提到颜色很重要，因为它可能有多组数据，因为我正在使用的系统是动态的。因此，为每个数据设置不同的颜色以轻松识别它很重要。无论如何，当涉及到适用于您的答案的同一问题时，您的答案对我有很大帮助。这对我有很大帮助。再次感谢您。