1
使用:http://code.google.com/apis/chart/interactive/docs/gallery/linechart.html#LoadingGoogle可視化API - 將Y軸放在右側?
沒有任何選項可以將y軸放在圖表的右側?真的?! :P
任何人都知道如何做這樣一個'激進'的事情?製圖API可以讓你做到這一點,但不是可視化?
謝謝。
使用:http://code.google.com/apis/chart/interactive/docs/gallery/linechart.html#LoadingGoogle可視化API - 將Y軸放在右側?
沒有任何選項可以將y軸放在圖表的右側?真的?! :P
任何人都知道如何做這樣一個'激進'的事情?製圖API可以讓你做到這一點,但不是可視化?
謝謝。
您可以通過series
選項解決此問題,並指定系列[0]的虛擬數據系列。像這樣:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'xAxis');
data.addColumn('number', 'dummySeries');
data.addColumn('number', 'realSeries');
data.addRow(['x label', null, 2]); // dummy series value needs to be null, otherwise if interactivity is on, the user can discover the dummy values even if the line is hidden per below
data.addRow(...iterate & add the rest of your data);
new google.visualization.LineChart(document.getElementById('graphdiv')).
draw(data, {curveType: 'function',
series:[{lineWidth:0},{targetAxisIndex:1}]} // specify right y-axis for 2nd series, and 'hide' the line for the 1st series as a precaution with lineWidth
);
}
google.setOnLoadCallback(drawVisualization);
</script>
function singleUserChart() {
google.charts.load('current', { packages: ['corechart', 'bar'] });
google.charts.setOnLoadCallback(drawAnnotations);
function drawAnnotations() {
var dataPercentage = new google.visualization.DataTable();
dataPercentage.addColumn('string', 'Productivity');
dataPercentage.addColumn('number', 'Ravi');
dataPercentage.addColumn({ type: 'string', role: 'annotation' });
dataPercentage.addColumn('number', 'Avg Data');
dataPercentage.addColumn({ type: 'string', role: 'annotation' });
dataPercentage.addRows([
['%Score1', 12, '12%', 15, '15%'],
['%Score2', 25, '25%', 21, '21%']
]);
singleUserChartOptions(dataPercentage, 'individualUserPercentageChart', true, 450);
}
}
function singleUserChartOptions(chartData, chartDivId, isShowPercent, chartWidth) {
var options = {
annotations: {
alwaysOutside: true,
textStyle: {
fontSize: 15,
color: '#000',
auraColor: 'none'
}
},
vAxis: { format: (isShowPercent == true) ? '#\'%\'' : '', ticks :[0,10,20,30,40,50]},
hAxis: {
slantedText: true,
slantedTextAngle: -45,
textStyle: { fontSize: 11 }
},
series: {
0: { targetAxisIndex: 0, },
1: { targetAxisIndex: 1, }
},
vAxes: {
0: { textPosition: 'none' },
1: {}
},
legend: { position: 'top' },
width: chartWidth,
height: 400
};
var chart = new google.visualization.ColumnChart(document.getElementById(chartDivId));
chart.draw(chartData, options);
}
singleUserChart();
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="individualUserPercentageChart" style="height: 500px; width: 100%"></div>
</body>
</html>