#javascript #charts #google-visualization
#javascript #Диаграммы #google-визуализация
Вопрос:
краткое объяснение.
Я использую комбинированную диаграмму Google для отображения графика ниже :https://google-developers.appspot.com/chart/interactive/docs/gallery/combochart#Configuration_Options
Но, как вы можете видеть, нелегко читать синие значения, пока красная линия представляет собой совокупность синих значений, она может быть очень высокой. Есть ли способ поместить вторую легенду справа от рисунка? Для того, чтобы красная линия оставалась на разумно высоком уровне и делала все это легко читаемым? я прочитал документ о легенде, но не нашел:
как поместить вторую легенду? Как сделать так, чтобы красная строка следовала за второй легендой? на всякий случай. У вас есть какой-нибудь фрагмент?
Спасибо.
Ответ №1:
Вы можете использовать несколько VAX и указать, какие ряды наносятся на какую ось. Примерно что-то вроде:
function drawVisualization() {
// Just data, use your own
var data = google.visualization.arrayToDataTable([
['Date', 'Value', 'Cumulate'],
['2014/01/01', 5, 5],
['2014/01/02', 20, 25],
['2014/01/03', 7, 32],
['2014/01/04', 15, 47],
['2014/01/05', 3, 50],
['2014/01/06', 5, 55],
['2014/01/07', 0, 55],
['2014/01/08', 0, 55],
['2014/01/09', 10, 65],
['2014/01/10', 5, 70],
['2014/01/11', 10, 80],
['2014/01/12', 0, 80],
['2014/01/13', 7, 87],
['2014/01/14', 13, 90],
['2014/01/15', 10, 100]
]);
var options = {
title : 'Pluviometre',
// multiple axis (you can have different labels, colors, etc.)
vAxes: [
{title: "mm/h"},
{title: "mm/h",textStyle:{color: "red"}}
],
hAxis: {title: "date"},
seriesType: "bars",
// 1st series on axis 0 (by default), 2nd series on axis 1
series: {1: {type: "line", targetAxisIndex:1}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}