Javascript 谷歌面积图轴和设置全宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10270810/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Area Chart axis and setting full width
提问by Rob
I'm trying to style and add another 2 x'axis to a Google area chart (a and b in the image). For example, the aaxis should be set to 900 and b: 700.
我正在尝试设置样式并将另一个 2 x'axis 添加到 Google 面积图（图像中的 a 和 b）。例如，a轴应设置为 900，b轴应设置为700。
Also trying to extend the chart to the full width of the containing div (960px) but my solution seems to do nothing.
还试图将图表扩展到包含 div (960px) 的全宽，但我的解决方案似乎什么也没做。
This is the desired effect.
这是想要的效果。
Current js
当前的js
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['November', 1000, 400],
['December', 1170, 460],
['January', 660, 1120],
['February', 690, 1120],
['March', 780, 1120],
['April', 820, 1120],
['May', 660, 1120],
['June', 1030, 540]
]);
var options = {
title: '',
backgroundColor: 'none',
width:'960',
legend: {position: 'none'},
hAxis: {title: 'Year', titleTextStyle: {color: 'grey'},
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
回答by gilly3
To get the chart width right, add a chartAreadefinition to your optionsobject. The chartAreasettings are listed in the AreaChartdocumentationunder "Configuration Options":
要获得正确的图表宽度，请chartArea为您的options对象添加定义。这些chartArea设置列在“配置选项”下的AreaChart文档中：
chartArea: {
left: 40,
top: 10,
width: 900,
height: 350
}
Demo:http://jsfiddle.net/2H7sp/
演示：http : //jsfiddle.net/2H7sp/
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['November', 1000, 400],
['December', 1170, 460],
['January', 660, 1120],
['February', 690, 1120],
['March', 780, 1120],
['April', 820, 1120],
['May', 660, 1120],
['June', 1030, 540]
]);
var options = {
title: '',
backgroundColor: 'none',
legend: { position: 'none' },
hAxis: {
title: 'Year',
titleTextStyle: {
color: 'grey'
}
},
chartArea: {
left: 40,
top: 10,
width: 600,
height: 150
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}body { margin: 0; }
#chart_div {
background-color: #f5f5f5;
width: 660px;
height: 200px;
overflow: hidden;
margin: 0 auto;
}<script src="https://www.google.com/jsapi?jsapi.js"></script>
<div id="chart_div"></div>You'll need to play with the numbers a little bit. chartArearefers to the graphical portion of the chart, excluding the axes, title, and legend. So you need to add padding to your values in order to leave room.
您需要稍微玩弄数字。 chartArea指图表的图形部分，不包括轴、标题和图例。因此，您需要为您的值添加填充以留出空间。
Edit:To get the horizontal lines, you'll need to add two additional series with values of 900 and 700 for each row in the respective columns:
编辑：要获得水平线，您需要为相应列中的每一行添加两个附加系列，其值为 900 和 700：
var data = google.visualization.arrayToDataTable([
[ 'Year', 'Sales', 'Expenses', 'a', 'b' ],
[ 'November', 1000, 400, 900, 700 ],
[ 'December', 1170, 460, 900, 700 ],
[ 'January', 660, 1120, 900, 700 ],
...
To get the colors right, specify a definition for the seriesoption that sets the area invisible and the line color black for the two new series.
要获得正确的颜色，请指定series为两个新系列设置区域不可见和线条颜色为黑色的选项的定义。
var options = {
...
series: {
2: { areaOpacity: 0, color: "#000" },
3: { areaOpacity: 0, color: "#000" }
},
...
This is close, but the lines will be solid instead of dashed, and there will be no labels. You can get these effects by adding columns with rolesto your data table. You'll not be able to use .arrayToDataTable()for this, but instead will need to use the more verbose syntax:
这很接近，但线条将是实线而不是虚线，并且不会有标签。您可以通过向数据表中添加具有角色的列来获得这些效果。您将无法使用.arrayToDataTable()此功能，而是需要使用更详细的语法：
var data = new google.visualization.DataTable();
data.addColumn("string", "Year");
data.addColumn("number", "Sales");
data.addColumn("number", "Expenses");
data.addColumn("number", "a");
data.addColumn("number", "b");
data.addRows([
['November', 1000, 400, 900, 700],
['December', 1170, 460, 900, 700],
['January', 660, 1120, 900, 700],
...
For dashed lines add a certainty role columnfollowing each of your "a" and "b" columns:
对于虚线，在每个“a”和“b”列之后添加一个确定性角色列：
data.addColumn({ type: "boolean", role: "certainty" });
To get the "a" and "b" labels add a annotation role columnsfollowing each of your certainty columns:
要获得“a”和“b”标签，请在每个确定性列之后添加注释角色列：
data.addColumn({ type: "string", role: "annotation" });
The certainty column values should all be false. The annotation column values should all be null except for the last row where you want the label to appear. The annotation aligns above the data point instead of to the right where you want it, but that's as good as you can get.
确定性列值都应该是false. 除了您希望标签出现的最后一行之外，注释列的值都应该为空。注释在数据点上方对齐，而不是在您想要的右侧对齐，但这是您所能获得的。
Your data rows with the new columns added will look like this:
添加了新列的数据行将如下所示：
data.addRows([
['November', 1000, 400, 900, false, null, 700, false, null],
['December', 1170, 460, 900, false, null, 700, false, null],
...
['May', 660, 1120, 900, false, null, 700, false, null],
['June', 1030, 540, 900, false, "a", 700, false, "b"]
]);
And, here's the end result: http://jsfiddle.net/2H7sp/2/
而且，这是最终结果：http: //jsfiddle.net/2H7sp/2/
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn("string","Year");
data.addColumn("number","Sales");
data.addColumn("number","Expenses");
data.addColumn("number","a");
data.addColumn({type:"boolean",role:"certainty"});
data.addColumn({type:"string",role:"annotation"});
data.addColumn("number","b");
data.addColumn({type:"boolean",role:"certainty"});
data.addColumn({type:"string",role:"annotation"});
data.addRows([
['November', 1000, 400, 900, false, null, 700, false, null],
['December', 1170, 460, 900, false, null, 700, false, null],
['January', 660, 1120, 900, false, null, 700, false, null],
['February', 690, 1120, 900, false, null, 700, false, null],
['March', 780, 1120, 900, false, null, 700, false, null],
['April', 820, 1120, 900, false, null, 700, false, null],
['May', 660, 1120, 900, false, null, 700, false, null],
['June', 1030, 540, 900, false, "a", 700, false, "b"]
]);
var options = {
title: '',
backgroundColor: 'none',
legend: { position: 'none' },
hAxis: {
title: 'Year',
titleTextStyle: { color: 'grey' }
},
series:{
2:{areaOpacity:0,color:"#000"},
3:{areaOpacity:0,color:"#000"}
},
chartArea: {
left: 40,
top: 10,
width: 600,
height: 150
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}body { margin: 0; }
#chart_div {
background-color: #f5f5f5;
width: 660px;
height: 200px;
overflow: hidden;
margin: 0 auto;
}<script src="https://www.google.com/jsapi?jsapi.js"></script>
<div id="chart_div"></div>