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

时间:2024-11-14 12:06:50

第一种:静态数据

$('#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设值