我到处搜索，似乎找不到答案。本质上，我正在创建一个包含许多（超过 2 个）Y 轴的 Google 图表。图表允许您执行此操作，但它们将 Y 轴的各种值组合在一起（参见下面的示例 1）。
我使用了另一项服务 HighCharts，并且能够很容易地完成此操作（请参见下面的示例 2）。如果有人知道如何使用 Google Charts 完成此任务，我将不胜感激。
示例 1（谷歌图表）：http ://austincjenkins.com/1.html
代码：
<html>
<head>
<style>
#chart_div {
background-color: #999;
border: 3px solid #000;
border-radius: 20px;
width: 750px;
height: 500px;
padding: 5px;
}
.left-margin {
margin-left: 20px;
}
</style>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Time', 'Rate', 'Ratio1', 'Total', 'Productivity', 'Percent'],
['Jan-12', 300, 1000, 1000, 600, 2],
['Feb-12', 200, 1200, 2000, 700, 5],
['Mar-12', 150, 1300, 3000, 650, 8],
['Apr-12', 100, 1400, 4000, 700, 10],
['May-12', 85, 1500, 5000, 600, 12],
['Jun-12', 90, 1600, 6000, 700, 31],
['Jul-12', 60, 1700, 7000, 600, 20],
['Aug-12', 45, 1800, 8000, 700, 15],
['Sep-12', 65, 1900, 9000, 650, 28],
['Oct-12', 35, 2000, 10000, 700, 35],
['Nov-12', 40, 2100, 11000, 600, 45],
['Dec-12', 31, 2200, 12000, 700, 55],
['Jan-13', 28, 2300, 13000, 600, 55],
['Feb-13', 22, 2400, 14000, 700, 55],
['Mar-13', 18, 2500, 15000, 650, 45],
['Apr-13', 15, 2600, 16000, 700, 60],
['May-13', 16, 2700, 17000, 600, 60]
]);
var options = {
title: '', // Here you can give the graph a title and position it
chartArea:{ // Here we can customize the size of the positioning and size of the chart
top: 10,
backgroundColor: "#fff",
width: "75%",
heigh: "75%"
},
fontSize: '', // Enter a number here if you'd like to adjust the font size of ALL the elements in the graph
//fontName: '', // Enter the name of a font here if you'd like to change the default
backgroundColor: { // Here we can customize the background of the chart
fill: "transparent"
},
curveType: "function", // can also be "function" to smooth out lines
hAxis: { // Here we can stylize the X-Axis
//title: 'Period',
slantedText: 'true',
showTextEvery: 1,
//titleTextStyle: { // This stylizes the X-axis title ("Period")
// color: 'black',
//fontName: '',
// fontSize: 20
//}
},
legend: {
position: "bottom",
alignment: "center",
background: "#fff"
}, // Here we can customize and position the
// The following allows us to customize the series points.
series:[
// "RATE"
{targetAxisIndex:0, color: "red", pointSize: 8, visibleInLegend: true},
// "Ratio1"
{targetAxisIndex:1, color: "blue", pointSize: 8, visibleInLegend: true, offset: 20},
// Total
{targetAxisIndex:2, color: "orange", pointSize: 8, visibleInLegend: true},
// Productivity
{targetAxisIndex:3, color: "black", pointSize: 8, visibleInLegend: true},
// Percent
{targetAxisIndex:4, color: "green", pointSize: 8, visibleInLegend: true}
],
vAxes:[ // Here we can customize the Y-Axes
{ // Left axis
left: 50,
titleTextStyle: { // This stylizes the X-axis title ("Period")
color: 'black',
//fontName: '',
fontSize: 20,
}
},
{ // Right axis
title: "Total",
titleTextStyle: { // This stylizes the X-axis title ("Period")
color: 'black',
//fontName: '',
fontSize: 20
}
}
]
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"</div>
</body>
</html>
示例 2（HighCharts）：http ://austincjenkins.com/2.html