Highcharts入坑记

第一次用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();