#javascript #html #charts
Вопрос:
Как я могу изменить размер ширины полосы столбца диаграммы Google? Я попытался добавить «панель: { Ширина группы:» 20%»}», но это ничего не делает с диаграммой.
Я действительно хотел, чтобы он стал тоньше.
Вот код, который я хочу использовать из Google диаграммы:
<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>
Комментарии:
1. Вы хотите изменить ширину только одного столбца или всех?
2. @testing_22 Все они
Ответ №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> Разделите эту единственную группу баров на отдельные бары
Поместите эту единственную панель групп в разные массивы и адаптируйте свои метки
- Плюсы: ширина действительно изменится от 0 до 100% в
groupWidth - Минусы: теряет цветные полосы
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;"> Используйте бессмысленные массивы
Поместите массив информации в середину двух других бессмысленных массивов, чтобы вы сосредоточили свои основные данные и создавали впечатление
- Плюсы: по-прежнему использует дизайн диаграммы материалов
- Минусы: растягивает прутья, не обеспечивает пространства между прутьями
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. Спасибо тебе за творческий ответ, парень. Я забыл упомянуть в своем вопросе, что цвета важны, потому что в них может быть несколько наборов данных, потому что моя система, над которой я работаю, динамична. Поэтому важно иметь разные цвета для каждой информации, чтобы легко идентифицировать ее. В любом случае, ваш ответ окажет мне большую помощь, когда речь зайдет о том же вопросе, что и ваш ответ. это мне очень поможет. Еще раз спасибо.