Я построил гистограмму с накоплением, чтобы проиллюстрировать положительные и отрицательные значения, которая выглядит следующим образом:
а>
Поскольку эти значения указывают противоположности, я хочу добавить дополнительные метки к правой оси Y. Это вообще возможно? Мой код до сих пор:
var data = google.visualization.arrayToDataTable([
['Type', 'Value1', 'Value2'],
['Left-1', 0, -5],
['Left-2', 0, -3],
['Left-3', 0, 0],
['Left-4', 3, 0],
['Left-5', 5, 0]
]);
var options = {
legend: 'none',
hAxis: {
minValue: -6,
maxValue: 6
}
}
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
jsfiddle: https://jsfiddle.net/cLz5nffm/
Ответ 1 · рейтинг 2 · WhiteHat
стандартных опций для дополнительной оси в этой конфигурации нет
но вы можете добавить собственные ярлыки
как только сработает событие 'ready'
см. следующий рабочий фрагмент...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Type', 'Value1', 'Value2'],
['Left-1', 0, -5],
['Left-2', 0, -3],
['Left-3', 0, 0],
['Left-4', 3, 0],
['Left-5', 5, 0]
]);
var options = {
legend: 'none',
hAxis: {
minValue: -6,
maxValue: 6
}
}
var chartDiv = document.getElementById('chart_div');
var chart = new google.visualization.BarChart(chartDiv);
google.visualization.events.addListener(chart, 'ready', function () {
Array.prototype.forEach.call(chartDiv.getElementsByTagName('text'), function(axisLabel) {
if (axisLabel.getAttribute('text-anchor') === 'end') {
addLabel(
axisLabel,
chart.getChartLayoutInterface().getChartAreaBoundingBox().left +
chart.getChartLayoutInterface().getChartAreaBoundingBox().width - 24 // <-- find good width
);
}
});
function addLabel(label, xOffset) {
var axisLabel = label.cloneNode(true);
axisLabel.setAttribute('x', parseFloat(label.getAttribute('x')) + xOffset);
axisLabel.innerHTML = label.innerHTML.replace('Left-', 'Right ');
chartDiv.getElementsByTagName('svg')[0].appendChild(axisLabel);
}
});
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
