Angularjs+Highcharts 使用基本步骤

最近在攻克前人留下的坑，爬了好久终于找到了出坑的办法，就差实际行（敲）动（码）了

先说问题，数可视功能用的时候会卡顿，查多天数据会假死，原因是数据量太大了，一天10w+的数据量，查半个月一个月的就用不了了

打算减少详细数据，分阈值加工统计数据然后保存，再查询显示

官网api链接：https://api.highcharts.com.cn/highcharts

然后，如题

和大多博文差不多，先在html中导入三个js

<!--angular.js-->
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<!--highcharts.src.js-->
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<!--highcharts-ng.js没找到链接，导入的本地文件-->
<script type="text/javascript" src="highcharts-ng/dist/highcharts-ng.js"></script> 

然后加入highchart标签，就没了

<div ng-app="myapp" ng-controller="myctrl as node">
    <highchart config="chart" ng-show="chart.series.length"></highchart>
</div>

js代码

var myapp = angular.module('myapp', ["highcharts-ng"]);
myapp.controller("myctrl", function ($scope) {
    $scope.chart = {
        //使用highcharts-ng.js 多了一层options,其他api都没有变化
        "options": {
            "chart": {"type": "areaspline", "zoomType": "x"},   //图表配置：面积图，缩放方式x轴
            "credits": {"enabled": false},                      //版权信息不启用
            "exporting": {"enabled": false},                    //不启用导出模块
            "tooltip": {"shared": true, "xDateFormat": "%Y-%m-%d %H:%M:%S", "valueDecimals": 2},//数据提示框，启用阴影，时间轴格式化，小数点位数
            "xAxis": {
                "type": "datetime",
                "dateTimeLabelFormats": {
                    "minute": "%H:%M",
                    "hour": "%H:%M",
                    "day": "%m-%e",
                    "week": "%m-%e",
                    "month": "%y-%m",
                    "year": "%Y"
                },
                "mixRange": 3600000,
                "minTickInterval": 3600000
            }
        },
        "series": [
            {
                "name": "PV曲线", "data": [[1548777604820, 0.3],
                    [1548777608820, 0.3],
                    [1548777612741, 0.34],
                    [1548777616740, 0.5],
                    [1548777620740, 0.3],
                    [1548777624730, 0.2],
                    [1548777628660, 0.6],
                    [1548777632660, 0.1],
                    [1548777636661, 0.8]], "visible": true
            },
            {
                "name": "电池电压", "data": [[1548777604820, 10.4],
                    [1548777608820, 10.4],
                    [1548777612741, 12.4],
                    [1548777616740, 8.4],
                    [1548777620740, 10.4],
                    [1548777624730, 13.4],
                    [1548777628660, 12.4]], "visible": false
            }],
        "title": {"text": null},
        "plotOptions": {
            "series": {
                "animation": false,
                "turboThreshold": 0
                // "threshold": 1000
            },
            "dataGrouping": {
                "enabled": false
            }
        },
        "loading": false
    };
    console.log($scope.chart.series.length);
    for (var i = 0; i < $scope.chart.series.length; i++) {
        console.log($scope.chart.series[i].data.length);
    }
});