JQuery图形插件，Highcharts平滑线条处理方法

第一种:静态数据

 

$('#THChartDiv').highcharts({

    chart: {

        type: 'spline'

    },

    title: {

        text:过程线'

},

    xAxis: {

    title: {

            text: 'X'

    }

},

yAxis: {

    title: {

            text: 'Y'

    }

},

tooltip: {

    enabled: true,

    formatter: function () {

        return 'this.y + '，' + this.x;

    }

},

legend: {

    enabled: false

},

plotOptions: {

    line: {

            dataLabels: {

                enabled: true

            },

        enableMouseTracking: false

    }

},

series: [{

    name: 'XY',

    data: [[3.9, 4.2], [5.7, 8.5], [8.9, 15.2], [17.0, 26.6], [34.2, 50.3], [46.6, 74.8]]

}]

});

chart = $('#THChartDiv').highcharts();

第二种：动态数据

 动态数据有几种办法，

  1：单独设置Ajax方法或者函数对data设值

      （1）首先对chart设置空数据

      series: [{
                    name: '水位',
                    data: []
                }]

 　 （2）再单独调用Ajax方法对chart重新赋值

       $.ajax({
                url: urlData,
                success: function (data) {

                    //把后台返回的json字符串转换为json对象
                    var jsonData = eval("(" + data + ")");
                    //定义一个数组
                    var sdata = [];

                    //获取图形实例
                    var series = chart.series[0];
                    //迭代，把异步获取的数据放到数组中
                    var i = 0;
                    $.each(jsonData, function (i, d) {

                        //此处必须强制数据类型转换，否则有可能不能正确绘制图形
                        sdata.push([parseFloat(d.z), parseFloat(d.q)]);
                    });
                    //设置数据，重新绘制图形
                    series.setData(sdata);
                }
            });

  2：chart在load事件中对data设值