欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Highcharts入坑记

程序员文章站 2022-08-05 21:37:03
第一次用Highcharts画一个温度湿度变化的图片,因为不熟悉跳了好多坑,特记录下: 一、JS引用 二、添加图表的容器 三、设置Highcharts的汉化,和不使用UTC时间,在这里折腾时间够久,一把泪 三、初始化Highcharts 关键点: A、因为Highcharts使用的是UTC时间会导致 ......

第一次用highcharts画一个温度湿度变化的图片,因为不熟悉跳了好多坑,特记录下:

一、js引用

<script src="~/scripts/jquery.min.js"></script>
<script src="~/scripts/moment.js"></script>
<script src="~/scripts/highcharts-7.0.3/code/highcharts.js"></script>
<script src="~/scripts/highcharts-7.0.3/code/modules/exporting.js"></script>
<script src="~/scripts/highcharts-7.0.3/code/modules/data.js"></script>
<script src="~/scripts/highcharts-7.0.3/code/modules/series-label.js"></script>
<script src="~/scripts/highcharts-7.0.3/code/modules/no-data-to-display.js"></script>

 

二、添加图表的容器

<div id="container"></div>

 

三、设置highcharts的汉化,和不使用utc时间,在这里折腾时间够久,一把泪

highcharts.setoptions({
            lang: {
                nodata: '暂无数据',
                contextbuttontitle: "图表导出菜单",
                decimalpoint: ".",
                downloadjpeg: "下载jpeg图片",
                downloadpdf: "下载pdf文件",
                downloadpng: "下载png文件",
                downloadsvg: "下载svg文件",
                drilluptext: "返回 {series.name}",
                loading: "加载中",
                months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
                nodata: "没有数据",
                numericsymbols: ["千", "兆", "g", "t", "p", "e"],
                printchart: "打印图表",
                resetzoom: "恢复缩放",
                resetzoomtitle: "恢复图表",
                shortmonths: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],
                thousandssep: ",",
                weekdays: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期天"]
            },
            global: {
                useutc: false
            }
        });

 

三、初始化highcharts

var chart = highcharts.chart(containerid,
            {
                credits: {
                    enabled: false
                },
                nodata: {
                    style: {
                        fontweight: 'bold',
                        fontsize: '15px',
                        color: '#303030'
                    }
                },
                data: {
                    csv: csvdata,
                    parsed: function(d) {
                        console.log(d);
                    },
                    parsedate: function(d) {
                        return gettimestamp(d);
                    }
                },
                title: {
                    text: title
                },
                xaxis: {
                    type: 'datetime',
                    //tickinterval: 12 * 3600 * 1000, // 坐标轴刻度间隔为一星期
                    tickwidth: 0,
                    gridlinewidth: 1,
                    labels: {
                        align: 'left',
                        x: 3,
                        y: -3
                    },
                    //时间格式化字符
                    //默认会根据当前的刻度间隔取对应的值,即当刻度间隔为一周时,取 week 值
                    datetimelabelformats: {
                        //day: '%h:%m'
                        day: '%b月.%e日 %h:%m'
                    }
                },
                yaxis: [
                    { // 第一个 y 轴,放置在左边(默认在坐标)
                        title: {
                            text: null
                        },
                        labels: {
                            align: 'left',
                            x: 3,
                            y: 16,
                            format: '{value:.,0f}'
                        },
                        showfirstlabel: false
                    }, { // 第二个坐标轴,放置在右边
                        linkedto: 0,
                        gridlinewidth: 0,
                        opposite: true, // 通过此参数设置坐标轴显示在对立面
                        title: {
                            text: null
                        },
                        labels: {
                            align: 'right',
                            x: -3,
                            y: 16,
                            format: '{value:.,0f}'
                        },
                        showfirstlabel: false
                    }
                ],
                legend: {
                    align: 'left',
                    verticalalign: 'top',
                    y: 20,
                    floating: true,
                    borderwidth: 0
                },
                tooltip: {
                    shared: true,
                    crosshairs: true,
                    // 时间格式化字符
                    // 默认会根据当前的数据点间隔取对应的值
                    // 当前图表中数据点间隔为 1天,所以配置 day 值即可
                    datetimelabelformats: {
                        second: '%b月.%e日 %h:%m:%s',
                        minute: '%b月.%e日 %h:%m',
                        hour: '%b月.%e日 %h:%m',
                        day: '%b月.%e日',
                        week: '%b月.%e日 ',
                        month: '%y年.%b月',
                        year: '%y年'
                    }
                },
                plotoptions: {
                    series: {
                        cursor: 'pointer',
                        point: {
                            events: {
                                // 数据点点击事件
                                // 其中 e 变量为事件对象,this 为当前数据点对象
                                click: function(e) {
                                    //$('.message').html(highcharts.dateformat('%y-%m-%d %h:%m:%s', this.x) +
                                    //    ':<br/>  值:' +
                                    //    this.y);
                                }
                            }
                        },
                        marker: {
                            linewidth: 1
                        }
                    }
                },
                events: {
                }
            });

 

关键点:

a、因为highcharts使用的是utc时间会导致时间变化对不上,解决办法 全局设置useutc为false,并且重写 data下属的parsedate 方法,使用moment 把时间转换成时间戳

 

 data: {
                    csv: csvdata,
                    parsed: function(d) {
                        console.log(d);
                    },
                    parsedate: function(d) {
                        return gettimestamp(d);
                    }
                },
  function gettimestamp(strdatetime) {
        return moment(strdatetime).valueof();
    }

 

b、因为数据是动态增加的 所以需要获取最新的数据,动态添加到图标里面,我使用的csv格式的数据,

addpoint第一个参数为数据项,需要转换成时间戳,第一个参数的数组的第二项为值,需要转换为数据类型,我最早就是没有转换,图表画出一段空白...........

多点连续添加,需将第二个参数设置为false,使用redraw函数来一次性重绘

  var lines = item.csv.split('\r\n');
                            // 遍历每一行
                            $.each(lines,
                                function(lineno, line) {
                                    if (lineno !== 0 && line !== "") {
                                        var items = line.split(',');
                                        var time = gettimestamp(items[0]);
                                        ginchart.series[0].addpoint([time, parsefloat(items[1])], false, false);
                                        ginchart.series[1].addpoint([time, parsefloat(items[2])], false, false);
                                    }
                                });
                            ginchart.redraw();