谷歌图表次轴线图 [英] Google charts secondary axis line charts
问题描述
我目前正在学习一些带有网络编辑功能的Google图表，以扩大我的知识范围，我遇到了一个我无法解决的问题。
I'm currently learning a bit of google charts with web editting to broaden my knowledge and I'm having a issue I can't get around.
<html>
<head>
<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([
['Year', 'Derby', 'Bristol', 'Warrington', 'Indianapolis', 'Dahlewitz', 'Montreal'],
['2012', 143754.00 , 7607.59, 958.51, 6029.12 , 13605.12, 586.00], //continue here!!!!!
['2013', 186065.32, 1674.50, 1823.93, 9574.24, 23935.14, 743.43],
['2014', 251238.53, 0, 0, 10154.41, 19926.63, 363.71],
['2015', 323134.57, 0, 0, 10400.66, 12002.84, 555.86],
['2016', 467058.18, 0, 0, 10529.27, 5844.90, 0] ,
['2017', 391209.43, 0, 0, 11072.43, 3603.65, 0] ,
['2018', 460257.40, 0, 0, 12031.69, 1833.52, 0] ,
['2019', 744114.34, 0, 0, 13012.83, 1517.89, 0] ,
['2020', 1484193.59,0, 0, 14274.78, 1292.55, 0]
]);
var options = {
title: 'Total CPU Hours Per Year By Site',
hAxis: {title: 'Year', titleTextStyle: {color: 'black'}}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
我想要做的是在辅助轴（右轴）上获取Derby的数据，但通过API看我不能看到如何实现它。
What I'm trying to do is get Derby's data on the secondary axis (the right axis), but looking through the API I cant see how to implement it.
推荐答案
要使用多轴，您需要在选项中设置轴值，声明有多个轴，和Series属性来指示哪些系列转到哪个轴。完成这一切的代码是用
To use multi axis you need to set the Axes values in your options, to declare that there is more than one axis, and the Series property, to indicate what series goes to which axis. The code to make this happen is to replace your options with
var options = {
title: 'Total CPU Hours Per Year By Site',
hAxis: {title: 'Year', titleTextStyle: {color: 'black'}} ,
series:[
{targetAxisIndex:1},
{targetAxisIndex:0},
{targetAxisIndex:0},
{targetAxisIndex:0},
{targetAxisIndex:0},
{targetAxisIndex:0}
],
vAxes:[
{}, // Left axis
{} // Right axis
]
};
如果你这样做，你需要确保图形是一个诚实的图形，一轴到两轴严重改变了图形可以给观众的印象，并且可以用作统计数据的一种说法。
If you are doing this you need to make sure that the graph is an honest one, the change from one axis to two axis seriously changes the impression that the graph can give to the audience and can be used as a way of lying with statistics.
这篇关于谷歌图表次轴线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
