Javascript Google绘制了多个Y轴（3个轴）
我到处都找遍了，似乎找不到答案。基本上，我正在创建一个具有多个（2个以上）Y轴的谷歌图表。图表允许您这样做，但它们将Y轴的各种值组合在一起（请参见下面的示例1） 我使用了另一项服务HighCharts，并且能够非常轻松地完成这项工作（参见下面的示例2）。如果有人知道如何使用谷歌图表来实现这一点，我将不胜感激 示例1（谷歌图表）： 代码：Javascript Google绘制了多个Y轴（3个轴）,javascript,google-visualization,Javascript,Google Visualization,我到处都找遍了，似乎找不到答案。基本上，我正在创建一个具有多个（2个以上）Y轴的谷歌图表。图表允许您这样做，但它们将Y轴的各种值组合在一起（请参见下面的示例1） 我使用了另一项服务HighCharts，并且能够非常轻松地完成这项工作（参见下面的示例2）。如果有人知道如何使用谷歌图表来实现这一点，我将不胜感激 示例1（谷歌图表）： 代码： #图表组{ 背景色：#999； 边框：3倍实心#000； 边界半径：20px； 宽度：750px； 高度：500px； 填充物：5px； } .左边距{ 左边
#图表组{
背景色：#999；
边框：3倍实心#000；
边界半径：20px；
宽度：750px；
高度：500px；
填充物：5px；
}
.左边距{
左边距：20px；
}
load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[‘时间’、‘比率’、‘比率1’、‘总’、‘生产率’、‘百分比’]，
[Jan-12'，300，1000，1000，600，2]，
[Feb-12'，200120020007005]，
[Mar-12'，150，1300，3000，650，8]，
[Apr-12'，1001400400070010]，
[May-12'，851500500060012]，
[Jun-12'，90160600070031]，
[Jul-12'，60170070060020]，
[Aug-12'，45180080070015]，
[Sep-12'，651900，9000，650，28]，
['Oct-12'，3520001000070035]，
[Nov-12'，40210011000606045]，
[Dec-12'，312200，12000700，55]，
[Jan-13'，282300130060055]，
['Feb-13'，22，2400，14000，700，55]，
[Mar-13'，182500，15000，650，45]，
[Apr-13,152600,16000700,60]，
['May-13'，162700，17000600，60]
]);
变量选项={
title:“”，//您可以在此处为图形指定一个标题并对其进行定位
chartArea:{//在这里，我们可以自定义定位的大小和图表的大小
前10名，
背景颜色：“fff”，
宽度：“75%”，
高：“75%。”
},
fontSize:“”，//如果要调整图形中所有元素的字体大小，请在此处输入一个数字
//fontName:“”，//如果要更改默认字体，请在此处输入字体名称
背景颜色：{//这里我们可以自定义图表的背景
填充：“透明”
},
curveType:“function”，//也可以是平滑线条的“function”
hAxis:{//这里我们可以对X轴进行样式化
//标题:"期间",，
倾斜文字：“真的”，
showTextEvery:1，
//titleTextStyle:{//此选项用于设置X轴标题（“期间”）的样式
//颜色：'黑色'，
//字体名称：“”，
//尺寸：20
//}
},
图例：{
位置：“底部”，
对齐：“中心”，
背景：“fff”
}，//在这里，我们可以自定义和定位
//以下内容允许我们自定义系列点。
系列：[
//“利率”
{targetAxisIndex:0，颜色：“红色”，点大小：8，visibleInLegend:true}，
//“比率1”
{targetAxisIndex:1，颜色：“蓝色”，点大小：8，visibleInLegend:true，偏移量：20}，
//总数
{targetAxisIndex:2，颜色：“橙色”，点大小：8，visibleInLegend:true}，
//生产力
{targetAxisIndex:3，颜色：“黑色”，点大小：8，visibleInLegend:true}，
//百分比
{targetAxisIndex:4，颜色：“绿色”，点大小：8，visibleInLegend:true}
],
vAxes:[//这里我们可以自定义Y轴
{//左轴
左:50,，
titleTextStyle:{//此选项用于设置X轴标题（“期间”）的样式
颜色：'黑色'，
//字体名称：“”，
尺寸：20，
}
},
{//右轴
标题：“总数”，
titleTextStyle:{//此选项用于设置X轴标题（“期间”）的样式
颜色：'黑色'，
//字体名称：“”，
尺寸：20
}
}
]
};
var chart=new google.visualization.LineChart（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
}
我不相信谷歌图表能为超过两个轴提供任何真正的支持。谢谢，马克。你可能是对的。奇怪的是，它允许您添加两个以上的targetAxisIndex，这就是为什么我想得到专家的意见！正如马克所说，谷歌目前并不支持这一点，而且可能是有充分理由的。从可视化的角度来看，第二张有5个不同Y轴的图表是绝对无用的。由于刻度都是任意的，并且每个项目的Y轴“大小”都会发生变化，因此比较这些值成为徒劳的练习。如果你把它们都放在同一个基础上（例如，0-100的刻度），那么它们可能有意义，你可以在GViz上绘制它们，但as is只是让你无法知道你在看什么。我有一个很好的用例。假设您有N个事件，每个事件期间测量的度量数为M。我想显示一个柱状图，在这里我可以将测量值分组
<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>