我需要绘制带有多条线的线图，但是该图也是双Y型图。在我的情况下，可以是3条或更多条线，其中每条线都属于左或右Y轴。
因此，请查看文档中的example / jsfiddle
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('date', 'Month');
data.addColumn('number', "Average Temperature");
data.addColumn('number', "Average Hours of Daylight");
data.addRows([
[new Date(2014, 0), -.5, 5.7],
[new Date(2014, 1), .4, 8.7],
[new Date(2014, 2), .5, 12],
[new Date(2014, 3), 2.9, 15.3],
[new Date(2014, 4), 6.3, 18.6],
[new Date(2014, 5), 9, 20.9],
[new Date(2014, 6), 10.6, 19.8],
[new Date(2014, 7), 10.3, 16.6],
[new Date(2014, 8), 7.4, 13.3],
[new Date(2014, 9), 4.4, 9.9],
[new Date(2014, 10), 1.1, 6.6],
[new Date(2014, 11), -.2, 4.5]
]);
var materialOptions = {
chart: {
title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
},
width: 900,
height: 500,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {axis: 'Temps'},
1: {axis: 'Daylight'}
},
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Temps: {label: 'Temps (Celsius)'},
Daylight: {label: 'Daylight'}
}
}
};
var classicOptions = {
title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
width: 900,
height: 500,
// Gives each series an axis that matches the vAxes number below.
series: {
0: {targetAxisIndex: 0},
1: {targetAxisIndex: 1}
},
vAxes: {
// Adds titles to each axis.
0: {title: 'Temps (Celsius)'},
1: {title: 'Daylight'}
},
hAxis: {
ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
new Date(2014, 4), new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
]
},
vAxis: {
viewWindow: {
max: 30
}
}
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
materialChart.draw(data, materialOptions);
button.innerText = 'Change to Classic';
button.onclick = drawClassicChart;
}
function drawClassicChart() {
var classicChart = new google.visualization.LineChart(chartDiv);
classicChart.draw(data, classicOptions);
button.innerText = 'Change to Material';
button.onclick = drawMaterialChart;
}
drawMaterialChart();
}
目前还不清楚我该怎么做。我尝试添加另一个，data.addRows([...])但没有给出一个很好的图表
有什么建议？
不确定我是否完全理解这个问题。
但是如果您只想添加其他行，则
需要在数据表中添加其他列。
对于添加的每列，新线或系列将添加到图表中。
下面的数据表将生成四行。
var data = new google.visualization.DataTable();
data.addColumn('date', 'Month');
data.addColumn('number', "Line 1 - Series 0");
data.addColumn('number', "Line 2 - Series 1");
data.addColumn('number', "Line 3 - Series 2");
data.addColumn('number', "Line 4 - Series 3");
然后您可以
通过设置axis名称来控制每条线属于哪个轴。
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {axis: 'Temps'},
1: {axis: 'Daylight'},
2: {axis: 'Temps'},
3: {axis: 'Daylight'}
},
在这里，第一行或系列0将属于左轴Temps。
右边的第二个（系列1）（日光），依此类推。
请参阅以下工作片段...
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('date', 'Month');
data.addColumn('number', "Line 1 - Series 0");
data.addColumn('number', "Line 2 - Series 1");
data.addColumn('number', "Line 3 - Series 2");
data.addColumn('number', "Line 4 - Series 3");
data.addRows([
[new Date(2014, 0), -.5, 5.7, -1, 10],
[new Date(2014, 1), .4, 8.7, -1, 10],
[new Date(2014, 2), .5, 12, -1, 10],
[new Date(2014, 3), 2.9, 15.3, -1, 10],
[new Date(2014, 4), 6.3, 18.6, -1, 10],
[new Date(2014, 5), 9, 20.9, -1, 10],
[new Date(2014, 6), 10.6, 19.8, -1, 10],
[new Date(2014, 7), 10.3, 16.6, -1, 10],
[new Date(2014, 8), 7.4, 13.3, -1, 10],
[new Date(2014, 9), 4.4, 9.9, -1, 10],
[new Date(2014, 10), 1.1, 6.6, -1, 10],
[new Date(2014, 11), -.2, 4.5, -1, 10]
]);
var materialOptions = {
chart: {
title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
},
width: 900,
height: 500,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {axis: 'Temps'},
1: {axis: 'Daylight'},
2: {axis: 'Temps'},
3: {axis: 'Daylight'}
},
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Temps: {label: 'Temps (Celsius)'},
Daylight: {label: 'Daylight'}
}
}
};
var classicOptions = {
title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
width: 900,
height: 500,
// Gives each series an axis that matches the vAxes number below.
series: {
0: {targetAxisIndex: 0},
1: {targetAxisIndex: 1},
2: {targetAxisIndex: 0},
3: {targetAxisIndex: 1}
},
vAxes: {
// Adds titles to each axis.
0: {title: 'Temps (Celsius)'},
1: {title: 'Daylight'}
},
hAxis: {
ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
new Date(2014, 4), new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
]
},
vAxis: {
viewWindow: {
max: 30
}
}
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
materialChart.draw(data, materialOptions);
button.innerText = 'Change to Classic';
button.onclick = drawClassicChart;
}
function drawClassicChart() {
var classicChart = new google.visualization.LineChart(chartDiv);
classicChart.draw(data, classicOptions);
button.innerText = 'Change to Material';
button.onclick = drawMaterialChart;
}
drawMaterialChart();
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句