Highcharts入坑记

2019-03-10 11:52:13来源：博客园阅读 ()

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