Google Line chart使用字符串自定义vAx并定义位置

时间:2014-12-05 20:35:33

标签: string google-visualization

我尝试在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;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

没关系,我找到了一种方法来实现方向:在vaxis选项中为-1。 这里的结果。 谢谢

&#13;
&#13;
<!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;
&#13;
&#13;