我尝试在xAxie和vAxie上使用字符串实现折线图。
对于vAxie,我想开始10eme
并以1er
值结束。是否可以切换这些值?
今天:
10eme
9eme
8eme
7eme
6eme
4eme
3eme
2eme
1er酒店
1 journee / 2 journee / 3 journee / ...
目标:
1er酒店
2eme
3eme
4eme
5eme
6eme
7eme
8eme
9eme
10eme
1 journee / 2 journee / 3 journee / ...
<!DOCTYPE HTML>
<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([
['Journee', 'Position'],
['1 Journee', 10],
['2 Journee', 7],
['3 Journee', 7],
['4 Journee', 6],
['5 Journee', 8],
['6 Journee', 9],
['7 Journee', 10]
]);
var options = {
title: 'Evolution au classement',
hAxis: {title: 'Journee', titleTextStyle: {color: '#333'}},
vAxis: {title: 'Classement'},
vAxis: {minValue: 1},
vAxis: {maxValue: 10},
viewWindowMode:'explicit',
vAxis: {title: 'Classement', ticks: [{v:1, f:"1er"},{v:9, f:"9eme"},{v:8, f:"8eme"},{v:7, f:"7eme"},{v:6, f:"6eme"},{v:5, f:"5eme"},{v:4, f:"4eme"},{v:3, f:"3eme"},{v:2, f:"2eme"},{v:10, f:"10eme"}]},
pointSize: 5,
};
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>
&#13;
答案 0 :(得分:0)
没关系,我找到了一种方法来实现方向:在vaxis选项中为-1。 这里的结果。 谢谢
<!DOCTYPE HTML>
<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([
['Journee', 'EQUIPE 1', 'EQUIPE 2'],
['1 Journee', 1, 3],
['2 Journee', 2, 5],
['3 Journee', 5, 4],
['4 Journee', 5, 3],
['5 Journee', 6, 5],
['6 Journee', 4, 6],
['7 Journee', 2, 7]
]);
var options = {
title: 'Evolution au classement',
curveType: 'function',
hAxis: {title: 'Journee', titleTextStyle: {color: '#333'}},
vAxis:
{title: 'Classement', minValue: 0, maxValue: 11, direction: -1, ticks: [{v:0, f:""},{v:1, f:"1er"},{v:9, f:"9eme"},{v:8, f:"8eme"},{v:7, f:"7eme"},{v:6, f:"6eme"},{v:5, f:"5eme"},{v:4, f:"4eme"},{v:3, f:"3eme"},{v:2, f:"2eme"},{v:10, f:"10eme"},{v:11, f:""}]},
pointSize: 5,
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
&#13;