0
當圖中有兩列或更多列時,列的分佈效果良好。我使用groupWidth和列尊重價值。僅改變一列的寬度Google Chart
但是當圖表返回時只有一列被強制佔據整個圖表空間。
列如何變小?
我的代碼:
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));
});
你也可以嘗試直接更改SVG當''ready''事件觸發 – WhiteHat
真的。他的兩個建議非常好。謝謝 –