highcharts spline传入数据

最新推荐文章于 2024-10-11 10:31:28 发布

dazzled

最新推荐文章于 2024-10-11 10:31:28 发布

阅读量660

点赞数

CC 4.0 BY-SA版权

分类专栏： highcharts 文章标签： js highcharts

本文链接：https://blog.youkuaiyun.com/dazzled/article/details/38368545

highcharts 专栏收录该内容

1 篇文章

订阅专栏

这段代码展示了如何使用Highcharts获取数据并生成折线图。通过`GetDeepChart`函数获取数据，处理时间并转化为Highcharts所需的日期格式，然后在`getline`函数中创建折线图系列，设置监测单位和数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function GetDeepChart(id, select, start, end) //获取数据

        {

            var wt = new Date(Date.parse(end.replace(/-/g, "/")));
            var nt = new Date(Date.parse(start.replace(/-/g, "/")));
            var cha = wt.getTime() - nt.getTime()
            var days = Math.floor(cha / (24 * 3600 * 1000))
            $.post("/HarthWork/Monitor/GetMonitorDeepList", { PointId: id, select: select, start: start, end: end }, function (data) {
                if (data != null) {
                    var Monitortext = $("#MonitorTypeTree").tree("getSelected");
                    $.post("/HarthWork/Monitor/GetTypeUnit", { newId: Monitortext.id }, function (typeUnit) {
                        if (data != null) {
                            var text = Monitortext.text;
                            var day = 1;
                            var danwei = typeUnit;
                            var ytext = '监测单位（' + danwei + '）';
                            var seriesname = $("#selectId").find("option:selected").text();

                            var mydata = eval(data);
                            var series = [];
                            for (var i = 0; i < mydata.length; i++) {
                                var name = mydata[i]['name'];
                                var mydata1 = mydata[i]['data'];
                                var data1 = [];
                                for (var j = 0; j < mydata1.length; j++) {
                                    var date = mydata1[j].datetime;
                                    var obj = date.split(",");
                                    var month = obj[1] - 1;
                                    data1.push([Date.UTC(obj[0], month, obj[2], obj[3], obj[4], obj[5]), parseFloat(mydata1[j].datavalue)]);
                                }

                              //解析数据，出入到数组里面
                                series.push({ name: name, data: data1 });
                            }

                            getline(seriesname, cha / 20, ytext, series, danwei);

                        }
                    }, "text")

                }
                else {
                    $('#container').html("");
                }
            })
        }

function getline(seriesname, cha, ytext, series, danwei)//生成图表

{

            if (cha == 0) {
                cha = 3600 * 1000;
            }
            $(function () {
                $('#container').highcharts({
                    global: {
                        useUTC: false
                    },
                    chart: {
                        type: 'spline'
                    },
                    title: {
                        text: seriesname
                    },

                    xAxis: {
                        type: 'datetime',
                        tickInterval: cha,//X轴时间间隔
                        tickPixelInterval: 150,

                        labels: {
                            enable: true,
                            rotation: 75, //旋转,效果就是影响标签的显示方向
                            formatter: function () {
                                return Highcharts.dateFormat('%Y-%m-%d %H', this.value);//转换时间格式
                            }
                        }

                    },
                    yAxis: {
                        title: {
                            text: ytext
                        }
                    },
                    tooltip: {
                        formatter: function () {
                            return '<b>' + this.series.name + '</b><br/>' +
                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/> ' + (this.y).toFixed(3) + danwei;//划上点的时候显示的内容
                        }
                    },

                    series: series//是数据已数组的方式传入，一般是获取一段json数据后转换为数组
                });
            });

}