Question

如果图表中有两列或更多列，则列的分布效果很好。我使用groupWidth和列来尊重值。

但是当图表返回时，只有一列被强制占据整个图形空间。

列如何变小？

我的代码：

var options = {
    width: '100%',
    height: 500,
    isStacked: true,
    series: [{
        color: '#5fb560'
    }, {
        color: '#db4437'
    }, {
        color: '#3366cc'
    }],
    legend: {
        textStyle: {
            color: '#6B6A6A'
        }
    },
    bar: {
        groupWidth: '55%'
    },
    chart: {
        title: 'Disponibilidade de equipamentos',
        subtitle: 'De: 04/08/2016 até: 04/08/2016  - Torre de resfriamento (TR_01_01)',
    },
    titleTextStyle: {
        color: '#333333'
    }
};

var data = [
    ['aqui em baixo', 'Ocupada', 'Disponível', 'Sobre hora'],
    ["TR_01_01", 6.81818181818, 0, 6.18181818182]
];

var chart;
google.charts.load('current', {
    callback: function() {

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

        google.visualization.events.addListener(chart, 'ready', function() {

            $('text:contains("Disponibilidade de equipamentos")').click(function() {
                $(this).html('cliquei')
            });

            $('text:contains("aqui em baixo")').click(function() {
                $(this).html('cliquei')
            });

            $('text:contains("Disponibilidade de equipamentos")').next().attr('fill', "#6B6A6A");
        });


        chart.draw(google.visualization.arrayToDataTable(data), google.charts.Bar.convertOptions(options));
    },
    packages: ['bar']
});


$(window).on("resize", function(event) {
    chart.draw(google.visualization.arrayToDataTable(data), google.charts.Bar.convertOptions(options));
});

Answer 1

使用材料图表

时，没有可以改变宽度的选项

但您可以在数据表中添加一个空行，
在现有行的两侧

请参阅以下工作代码段

＆＃13;

google.charts.load('current', {
  callback: function () {
    var options = {
        width: '100%',
        height: 500,
        isStacked: true,
        series: [{
            color: '#5fb560'
        }, {
            color: '#db4437'
        }, {
            color: '#3366cc'
        }],
        legend: {
            textStyle: {
                color: '#6B6A6A'
            }
        },
        bar: {
            groupWidth: '55%'
        },
        chart: {
            title: 'Disponibilidade de equipamentos',
            subtitle: 'De: 04/08/2016 até: 04/08/2016  - Torre de resfriamento (TR_01_01)',
        },
        titleTextStyle: {
            color: '#333333'
        }
    };

    var data = [
        ['aqui em baixo', 'Ocupada', 'Disponível', 'Sobre hora'],
        ["TR_01_01", 6.81818181818, 0, 6.18181818182]
    ];

    var dataTable = google.visualization.arrayToDataTable(data);
    if (dataTable.getNumberOfRows() === 1) {
      dataTable.insertRows(0, [[' ', null, null, null]])
      dataTable.addRow([' ', null, null, null]);
    }

    var container = document.getElementById('chart_div');
    chart = new google.charts.Bar(container);
    chart.draw(dataTable, google.charts.Bar.convertOptions(options));
  },
  packages: ['bar']
});

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

＆＃13;

仅更改一列Google Chart的宽度

1 个答案: