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

Question

如何修改谷歌图表列的条形宽度大小？ 我试图添加 '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>

Answer 1

根据文档，

材料图表处于测试阶段。 外观和互动性在很大程度上是最终的，但许多经典图表可用的选项则尚未它们可用。 您可以在此问题中找到尚不支持的选项列表。

这些选项之一是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;">

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

问题描述

1 个解决方案

解决方案1
0 2021-11-12 12:49:32

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

将仅一组条形分离成单个条形

使用无意义的数组

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

问题描述

1 个解决方案

解决方案1 0 2021-11-12 12:49:32

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

将仅一组条形分离成单个条形

使用无意义的数组

解决方案1
0 2021-11-12 12:49:32