私はどこでも検索しましたが、これに対する答えが見つからないようです。基本的に、多くの (2 つ以上の) Y 軸を持つ Google チャートを作成しています。チャートではこれを行うことができますが、Y 軸のさまざまな値がまとめられています (以下の例 1 を参照)。
別のサービスである HighCharts を利用したところ、これは非常に簡単に実現できました (以下の例 2 を参照)。Google チャートでこれを達成する方法について誰かが情報を持っていれば、私は無限に感謝します.
例 1 (Google チャート): 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