2012-08-15 72 views
0

使用代码显示什么我必须做些什么来解决以下问题:谷歌图表如何始终显示工具提示

  1. 我需要在酒吧的上方显示的列值(总是)没有点击它。
  2. 我需要分配一个颜色的每个条
  3. 我需要显示在X和Y标签
  4. 我需要显示最低限度的值= 0和maximun值至5,实际上该图形示出了从4.3至5.0

任何想法?先谢谢你。

<html> 
    <head> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     //load the Google Visualization API and the chart 
     google.load('visualization', '1', {'packages':['columnchart']}); 

     //set callback 
     google.setOnLoadCallback (createChart); 

     //callback function 
     function createChart() { 

      var data = new google.visualization.DataTable(
       { 
        "cols": [ 
         {"id":"","label":"Topping","pattern":"","type":"string"}, 
         {"id":"","label":"Promedio","pattern":"","type":"number"} 
         ], 
        "rows": [ 
         {"c":[{"v":"1", "f":null},{"v":4.31,"f":null}]}, 
         {"c":[{"v":"2", "f":null},{"v":4.84,"f":null}]}, 
         {"c":[{"v":"3", "f":null},{"v":4.77,"f":null}]}, 
         {"c":[{"v":"4", "f":null},{"v":4.80,"f":null}]}, 
         {"c":[{"v":"5", "f":null},{"v":4.78,"f":null}]}, 
         {"c":[{"v":"6", "f":null},{"v":4.80,"f":null}]}, 
         {"c":[{"v":"7", "f":null},{"v":4.79,"f":null}]}, 
         {"c":[{"v":"8", "f":null},{"v":4.83,"f":null}]}, 
         {"c":[{"v":"9", "f":null},{"v":4.77,"f":null}]}, 
         {"c":[{"v":"10","f":null},{"v":4.85,"f":null}]}, 
         {"c":[{"v":"11","f":null},{"v":4.52,"f":null}]} 

         ] 
       } 
      ) 

      //instantiate our chart objects 
      var chart = new google.visualization.ColumnChart (document.getElementById('chart_div')); 

      //define options for visualization 
      var options = { 

       width: 800, 
       height: 300, 
       is3D: true, 
       legend: 'none',   
       axisTitlesPosition: 'in', 
       title: 'My Graphic', 

       hAxis: { 
        title: 'hAxis Title', 
        titleTextStyle: {color: 'red'}, 
        textPosition: 'out' 
       }, 

       vAxis: { 

        viewWindowMode: 'explicit', 
        viewWindow: { 
         max: 5.0, 
         min: 0.0 
        }, 
        minValue: 0.0, 
        maxValue: 5.0, 
        textPosition: 'out' 

       } 
      }; 

      //draw my chart 
      chart.draw(data, options); 

     } 

    </script> 
    </head> 
    <body> 
    <div id="chart_div" style="width: 900px; height: 700px;"></div> 
    </body> 
</html> 

Actual graph

回答