google chart API学习心得

google chart API还是很强大的，在线自动帮你将所需要的数据汇总成，各式各样的图标，折线 饼状 柱状 气泡等等

现在已折线稍加说明一下自己通过使用理解的一些配置属性的含义

<script type="text/javascript">
      google.setOnLoadCallback(drawChartLine);
      function drawChartLine() {
        var data = google.visualization.arrayToDataTable([
          ['2班学生学号',  '年级排名','排名波动值'],
          ['7',    7,21.46],
          ['5',     28,42.63],
          ['14',    37,82.43],
          ['13', 85,65.04],
          ['8',    123,79.20],
          ['10',134,156.82],
          ['4',    157,143.88],
          ['11',    203,139.14],
          ['12',    234,131.37],
          ['15',    234,109.15],
          ['19',    257,135.66],
          ['6',    267,61.55],
          ['2',    274,154.25],
          ['9',    282,101.60],
          ['3',    321,112.91],
          ['17',    378,95.53],
          ['18',    434,29.61],
          ['1',    468,61.34],
          ['20',    478,50.08],
          ['16',    518,9.07]
        ]);
        var options = {
          title: '2011-2012期末考试2班学生年级排名和波动值',
          hAxis: {title: '2班学生学号', titleTextStyle: {fontSize:18},},
          vAxis: { titleTextStyle: {fontSize:18},gridlines:{color: 'pink', count: 6}},
          titleTextStyle:{fontSize:8}
          /*legend:{position: 'bottom', textStyle: {color: 'blue', fontSize: 16}}//调节图例标注的样式*/
        };
        /*
            *textPosition 表示坐标文字的位置 有in和out两个参数 表示在坐标轴的内部还是外部
            
            *hAxis.slantedText:true 表示x轴坐标的坐标值以一个角度显示，false表示垂直显示
            
            *slantedTextAngle:70 可选值是1-90 调整文字偏斜的角度 此处为70度
            
            *showTextEvery:2 表示当坐标值过密 过挤的时候 可以调节显示的数字的多少 1表示显示所有 2表示显示相邻的
            
            *direction:-1 表示坐标系内的图形以各种方向显示 -1表示倒过来显示,但是水平方向的direction表示内容由小到大和由大到小
            
            *series: {0:{color: 'black', visibleInLegend: true}, 1:{color: 'green', visibleInLegend: false}},
             这个可以修来修改各个轴的显示颜色和说明图例是否显示
            *minorGridlines:{color:'green',count:5} 用来表示Y轴的每个坐标轴区段之间的样式划分 比如Y轴标注了2 4 6 8，那他划分的就是2-4 4-6 6-8 之间的样式 比如内部线为绿色 每个区段里又有5条线
            
            *logScale:true 用来以对数形式 表现Y轴的数值 可显示小数点 前提是 必须均为正数

            *vAxis vertical垂直方向的属性

            vAxis.direction:1表示图标正向显示
            -1表示倒过来显示 

            hAxis.gridlines 表示horizon水平方向轴 X轴的网格线 的颜色和数量

            数量可以提高垂直轴的精度，反过来 垂直方向的网格也可以提高水平轴的精度
            
        */
        var chart= new google.visualization.LineChart(document.getElementById('chart_div_1ine'));
        $(window).on('debouncedresize', function() { chart.draw(data, options); });
        chart.draw(data, options);
      }
      $(function(){
        var $height=$(".sideTip").get(0).offsetHeight;
        $(".sideTip").css("marginTop",-$height/2);
      });
</script>

这只是其中一部分，对于googleAPI中函数的调用和使用还有待进一步学习