highcharts

http://www.cnblogs.com/liuhaorain/archive/2012/01/24/2311352.html

funsioncharts中的swf文件iphone手机不支持（苹果不支持flash），下载带flas和插件的浏览器，不方便，不通用，（这部分没有上网仔细考究，所以作为草稿）；所以插件改为highcharts

highcharts项目使用指南：

背景：spring mvc框架使用@responsebody将对象转换为json类型，后台的产生的json对象不能用该注解，改为字符串（response.getWriter().write(jsonObject.toString());）返回页面用eval函数将字符串转换为json类型

步骤1：highcharts是依托于jquery的控件，所以需要引入jquery。

<script type="text/javascript" src="${rc.contextPath}/scripts/common/jquery/jquery-1.8.2.js"></script>

<script type="text/javascript" src="${rc.contextPath}/scripts/common/highCharts/highcharts.js"></script>
<script type="text/javascript" src="${rc.contextPath}/scripts/common/highCharts/exporting.js"></script>

步骤2：页面控制，脚本部分

$(function () {
   var options = {
       chart: {
        renderTo:'container',
           type: 'spline'
       },
       title: {
           text: '趋势图'
       },
       subtitle: {
           text: ''
       },
       xAxis: {
        title: {
        text:'日期'
        },
           categories: [],
           labels: {
            rotation: 60
           }
       },
       yAxis: {
           title: {
               text: '单价'
           },
           labels: {
               formatter: function() {
                   return this.value +'元'
               }
           }
       },
       tooltip: {
           crosshairs: true,
           shared: true
       },
       plotOptions: {
           spline: {
               marker: {
                   radius: 4,
                   lineColor: '#666666',
                   lineWidth: 1
               }
           }
       },
       series: [{
           name: '',
           marker: {
               symbol: 'square'
           },
           data: []
       }]
   };
   
   //获取后台数据
   var pId = $("#priceId").val();
   var url = _basePath + "/gPriceTrend/getPriceTrend.html?id=" + pId;
   $.post(url,function(data){
   if(null != data){
  var jsonData = eval("(" + data + ")");
 
    options.subtitle.text = jsonData.subtitle.text;
    options.series[0].name = jsonData.series.name;
   
    var cateLength = jsonData.xAxis.categories.length;
    for( var i=0; i < cateLength; i++){
    options.xAxis.categories[i] = jsonData.xAxis.categories[i];
    }
    var dataLength = jsonData.series.data.length;
    for( var j=0; j < dataLength; j++){
    options.series[0].data[j] = changeTwoDecimal(jsonData.series.data[j]);
    }
   }
   var chart = new Highcharts.Chart(options);
   });
   
});


function changeTwoDecimal(x)
{
var f_x = parseFloat(x);
if (isNaN(f_x))
{
return false;
}
var f_x = Math.round(x*100)/100;


return f_x;
}

步骤3：页面控制，html

<div id="container" style="width:90%;height:30%"></div>