Я использую Google Charts для визуализации некоторых показателей, и я столкнулся с некоторой проблемой. Сейчас у меня есть гистограмма, который выглядит следующим образом (код ниже) и коды за этоКак создать сложную гистограмму для трех наборов данных?
Javascript
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['bar', 'corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Branch Office', 'DataSet 1', 'DataSet 2', 'DataSet 3'],
['Chicago', 400, 500, 1000],
['New York', 400, 500, 1000],
['Seattle', 400, 500, 1000],
['Average', 400, 500, 1000]
]);
var options = {
chart: {
//title: 'Sales Order Performance',
//subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'horizontal', // Required for Material Bar Charts.
hAxis: { format: 'decimal' },
height: 400,
colors: ['#1b9e77', '#d95f02', '#7570b3']
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
var btns = document.getElementById('btn-group');
btns.onclick = function (e) {
if (e.target.tagName === 'BUTTON') {
options.hAxis.format = e.target.id === 'none' ? '' : e.target.id;
chart.draw(data, google.charts.Bar.convertOptions(options));
}
}
}
</script>
HTML
<body>
<div id="chart_div"></div>
</body>
Взяты из некоторых подобных ответов, то ближайший, который я получил, изменяет несколько уже размещенных скриптов, но ничего, похоже, не работает, как мне это нужно. Я пытаюсь совместить диаграмму, которую я предоставил с помощью Stacked Bar Graph (как показано и объяснено here, но все маленькие одноразовые хаки, которые я видел в Google или на переполнении стека, не получают мне то, что мне нужно.
я принципиально хочу бар «DataSet 3», чтобы иметь возможность быть разбито на строки, подобных этой
Как я могу повернуть диаграмму у меня уже есть в столбчатом граф, который имеет 3 бара за точку данных? И если этого не может быть сделано, то чем ближе я могу сделать, чтобы получить аналогичный результат?
Редактировать: Забыл добавить скрипку, о которой я упоминал ранее. Это так близко, что я получил конечный результат, который мне нужен http://jsfiddle.net/qv325979/126/, но он все еще не совсем прав, и пример, с которого я начал работать, должен был сильно измениться, чтобы добраться до этого момента. Я, по сути, пытаюсь найти его там, где есть 3 бара (вместо 2), а верхние 2 бара для каждого элемента имеют 1 точку данных, а нижний план можно разделить на 5 или около того.
Я не совсем понимаю, как сломать решетку, и почему верхний бар в этой скрипке имеет 5 отдельных сегментов, в то время как красная полоса имеет только 1, поэтому, если кто-нибудь более осведомленный, может объяснить, почему это также было бы очень полезно.
в скрипку, установка опции 'series.5', ломает последний столбец из стека ... – WhiteHat
Благодаря @WhiteHat так, что путь к достижению желаемый результат, когда у меня есть 2 бара с одним сегментом, а затем 3-й бар с 5 или около того? – Mkalafut