Google Combo Chart - интервалы с несколькими барами и линиями
Я пытаюсь создать комбинированную диаграмму с несколькими барами и линиями. Поскольку строки являются средними, я хочу добавить минимальную и максимальную шкалы ошибок. Google называет их "интервалами".
Проблема в том, что линии выровнены по центру столбцов (между двумя, что нормально), но вместо этого интервалы для этих линий совпадают с первым столбцом. Смотрите мой пример. Пример выпуска
Мой код, как показано ниже. Любая помощь высоко ценится! Возможно, это ошибка Google? Или есть параметр выравнивания, который я пропустил, может быть?
google.charts.load('current', {'packages': ['corechart']});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = new google.visualization.DataTable();
data.addColumn('string', 'Week'); // Implicit domain label col.
data.addColumn('number', 'A average'); // Implicit series 1 data col.
data.addColumn({type: 'string', role: 'annotation'}); // annotationText col.
data.addColumn('number', 'A rolling average'); // Implicit series 1 data col.
data.addColumn({type: 'number', role: 'interval'}); // interval role col.
data.addColumn({type: 'number', role: 'interval'}); // interval role col.
data.addColumn('number', 'B average'); // Implicit series 1 data col.
data.addColumn({type: 'string', role: 'annotation'}); // annotationText col.
data.addColumn('number', 'B 4wk average'); // Implicit series 1 data col.
data.addColumn({type: 'number', role: 'interval'}); // interval role col.
data.addColumn({type: 'number', role: 'interval'}); // interval role col.
data.addRows([
['1 (01/03/17)', 0.1, 'A1', 0.2, 0.19, 0.21, 0.20, 'A2', 0.67, 0.66, 0.68],
['2 (08/03/17)', 0.23, 'B1', 0.90, 0.89, 0.91, 0.76, 'B2', 0.43, 0.42, 0.44],
['3 (15/03/17)', 0.10, 'C1', 0.65, 0.63, 0.66, 0.34, 'C2', 0.89, 0.88, 0.90],
['4 (22/03/17)', 0.22, 'D1', 0.20, 0.19, 0.21, 0.23, 'D2', 0.43, 0.42, 0.44]
// ['1 (01/03/17)',10, 2, 11, 'A'],
// ['2 (08/03/17)', 23, 20, 25, 'B'],
// ['3 (15/03/17)', 1, 0.95, 1.15, 'C'],
// ['4 (22/03/17)', 22, 20, 30, 'D']
]);
var options = {
title: 'Test',
vAxis: {
title: '% average',
format: '# %'
},
hAxis: {
title: 'Week number (week commencing)'
},
seriesType: 'bars',
series: {
1: {type: 'line'},
3: {type: 'line'}
},
intervals: {
style: 'boxes'
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
1 ответ
выглядит как ошибка - когда интервалы используются с несколькими столбцами (столбцами),
интервалы выровнены правильно, иначе...
Одним из вариантов будет перемещение их вручную, когда график 'ready' события пожары
тем не менее, диаграмма отправит интервалы обратно в исходное местоположение,
в любое время, когда есть интерактивность, например, зависание или выбор
как таковой, MutationObserver может быть использован, чтобы узнать, когда произошла интерактивность,
для того, чтобы установить желаемое расположение интервалов
см. следующий рабочий фрагмент,
интервалы перемещаются в новые x-координаты, когда 'ready' события пожары,
новые x-координаты затем сохраняются и повторно применяются, когда возникает интерактивность...
google.charts.load('current', {
callback: drawVisualization,
packages: ['corechart']
});
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Week'); // Implicit domain label col.
data.addColumn('number', 'A average'); // Implicit series 1 data col.
data.addColumn({type:'string', role:'annotation'}); // annotationText col.
data.addColumn('number', 'A rolling average'); // Implicit series 1 data col.
data.addColumn({type:'number', role:'interval'}); // interval role col.
data.addColumn({type:'number', role:'interval'}); // interval role col.
data.addColumn('number', 'B average'); // Implicit series 1 data col.
data.addColumn({type:'string', role:'annotation'}); // annotationText col.
data.addColumn('number', 'B 4wk average'); // Implicit series 1 data col.
data.addColumn({type:'number', role:'interval'}); // interval role col.
data.addColumn({type:'number', role:'interval'}); // interval role col.
data.addRows([
['1 (01/03/17)',0.10, 'A1', 0.20,0.19,0.21, 0.20, 'A2', 0.67,0.66,0.68],
['2 (08/03/17)',0.23, 'B1', 0.90,0.89,0.91, 0.76, 'B2', 0.43,0.42,0.44],
['3 (15/03/17)',0.10, 'C1', 0.65,0.63,0.66, 0.34, 'C2', 0.89,0.88,0.90],
['4 (22/03/17)',0.22, 'D1', 0.20,0.19,0.21, 0.23, 'D2', 0.43,0.42,0.44]
]);
var options = {
title : 'Test',
vAxis: {title: '% average',format:'# %'},
hAxis: {title: 'Week number (week commencing)'},
height: 600,
seriesType: 'bars',
series: {
1: {type: 'line'},
3: {type: 'line'}
},
tooltip: {trigger: 'both'},
intervals: {style: 'boxes'},
width: 900
};
var chartDiv = document.getElementById('chart_div');
var chart = new google.visualization.ComboChart(chartDiv);
var observer = new MutationObserver(function () {
getIntervals().forEach(function (rect, index) {
rect.setAttribute('x', xCoords[index]);
});
});
var xCoords = {};
google.visualization.events.addListener(chart, 'ready', function () {
getIntervals().forEach(function (rect, index) {
xCoords[index] = parseFloat(rect.getAttribute('x')) + 22;
rect.setAttribute('x', xCoords[index]);
});
observer.observe(chartDiv, {
childList: true,
subtree: true
});
});
function getIntervals() {
var intervals = [];
Array.prototype.forEach.call(chartDiv.getElementsByTagName('rect'), function(rect) {
if ((rect.getAttribute('fill') === '#a52b0e') ||
(rect.getAttribute('fill') === '#0c7112')) {
intervals.push(rect);
}
});
return intervals;
}
chart.draw(data, options);
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>примечание: смещение, используемое для перемещения координаты х (22) останется неизменным,
до тех пор, пока размер графика остается постоянным
и может потребоваться корректировка при изменении ширины графика...