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设值

原文地址:https://www.cnblogs.com/coolsundy/p/4207233.html