[英]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.这就是说,我能够找到一些解决方法,每个方法都有自己的积极方面和缺点。
Here you have to reconstruct the chart's code following the Classical one在这里,您必须按照经典代码重建图表的代码
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>
Put that only group bar in different arrays and adapt your labels将唯一的组栏放在不同的数组中并调整您的标签
groupWidth
优点:宽度确实会在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;">
Put the array of information in the middle of two other meaningless arrays so that you center your main data and gives the impression将信息数组放在另外两个无意义数组的中间,以便您将主要数据居中并给人留下印象
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.