highcharts.js进行多图表封装

原创
2017/12/13 22:38
阅读数 201

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>HighChart组件底层封装--调用实例</title>
        <style>
            
            div{
                margin-left: 200px;
                margin-top: 10px;
                width: 800px;
                height: 260px;
            }
        </style>
        <script src="js/jquery.min.js"></script>    
         <!--描述:highchart 公共js-->
          <script src="js/code/highcharts.src.js"></script>
        <script src="js/code/highcharts-more.js"></script>
        <script src="js/code/modules/exporting.js"></script>
        <!--描述:highchart 旭日图js-->
        <script src="js/code/modules/sunburst.src.js"></script>
        <!--描述:highchart 颜色js-->
        <script src="js/code/themes/dark-blue.src.js"></script>
        <!--描述:highchart 封装类js   -->
       
        <script src="js/highchartPack.js"></script>
       
    </head>
    <body>
        
        
        <div id="container"></div>
        <div id="container1"></div>
        <div id="container2"></div>
        <div id="container3"></div>
        <div id="container4"></div>
        
        
        <script>
            $(document).ready(function(){                
                var  chart=new ChartPack();
                chart.getChartData('container', 'column', "localhost:8080/cems");
                var  chart1=new ChartPack();
                chart1.getChartData('container1', 'line', "localhost:8080/cems");
            
                var  chart3=new ChartPack();
                chart3.getChartData('container3', 'spline', "localhost:8080/cems");
            
                var  chart2=new ChartPack();
                chart2.getChartData('container2', 'sunburst', "localhost:8080/cems");
            })
        </script>
        
    </body>
</html>

 

function ChartPack() {

    Highcharts.setOptions({
        global: {
            useUTC: false
        },
        credits: {
            enabled: false
        },
        legend: {
            enabled: false
        },
        exporting: {
            enabled: false
        }
    });

    //折线图请求数据
    this.getChartData = function(selector, type, dataUrl) {
        var url;
        var chartType;

        if(type == 'column') {
            //柱形图
            chartType = type;
            url = dataUrl;
        } else if(type == 'line') {
            //折线图
            chartType = type;
            url = dataUrl;
        } else {
            //饼图
            chartType = type;
            url = dataUrl;
        }
        //        ZAction.requestJson(url, {}, function(result) {
        //            if(result.flag) {
        //调用封装参数
        var data = {};
        data.title = 'xiaowang';
        data.unit = '人';
        data.staValue = [9.9, 29.9, 39.9, 49.9, 59.9, 69.9];

        this.proceData(selector, data, chartType);
        //            }
        //
        //        });
    };

    //各图表数据组装            
    this.proceData = function(selector, data, type) {

        //图表一级标题和小标题   -- 公用
        var arg = {};
        arg.title = data.title;
        arg.unit = data.unit;

        if(type == 'column' || type == 'line') {
            //横坐标
            var x = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
            //图表series中的data
            var svalue = [];
            $.each(data.staValue, function(i, v) {
                svalue.push(v);
            })

            Highcharts.chart(selector, this.lineandColumnOption(arg, x, svalue, type));

        } else if(type == 'spline') {
            var svalue = [];
            $.each(data.staValue, function(i, v) {
                svalue.push(v);
            })

            Highcharts.chart(selector, this.splineOption(svalue),
                function(c) {
                    ChartPack.activeLastPointToolip(c)
                });

        } else if(type == 'sunburst') {
            //旭日图    ...

            Highcharts.getOptions().colors.splice(0, 0, 'transparent');
            var levels = [];
            Highcharts.chart(selector, this.sunburstOption(arg, data, levels));
        }
    }

    //折线图 柱状图
    this.lineandColumnOption = function(arg, categories, data, type) {
        var dataLine = {
            chart: {
                type: type,
                backgroundColor: 'rgba(255, 255, 255, 0)'
            },
            title: {
                text: arg.title
            },
            subtitle: {
                text: arg.unit
            },
            xAxis: {
                categories: categories
            },

            yAxis: {
                title: {
                    text: 'Temperature (\xB0C)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },

            tooltip: {
                headerFormat: '<b>{series.name}</b><br>',
                pointFormatter: function() {
                    return '<span style="color:' + this.color + '">' +
                        Highcharts.dateFormat('%Y-%m-%d', this.x) + '<br/>' +
                        Highcharts.numberFormat(this.y, 2) + '<a style="font-size:10px;"> 万吨</a></span>';
                }
            },
            //
            //                legend: {
            //                    layout: 'vertical',
            //                    align: 'right',
            //                    verticalAlign: 'middle',
            //                    borderWidth: 0
            //                },

            series: [{
                name: 'Tokyo',
                data: data

            }]
        };
        return dataLine;
    }
    //旭日图
    this.sunburstOption = function(arg, data, levels) {
        var rdata = {
            chart: {
                type: 'sunburst',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
                //                backgroundColor: 'rgba(255, 255, 255, 0)'
            },

            title: {
                text: '2017 世界人口分布'
            },
            subtitle: {
                text: ''
            },
            series: [{
                type: 'sunburst',
                data: data,
                allowDrillToNode: true,
                cursor: 'pointer',
                dataLabels: {
                    /**
                     * A custom formatter that returns the name only if the inner arc
                     * is longer than a certain pixel size, so the shape has place for
                     * the label.
                     */
                    formatter: function() {
                        var shape = this.point.node.shapeArgs;

                        var innerArcFraction = (shape.end - shape.start) / (2 * Math.PI);
                        var perimeter = 2 * Math.PI * shape.innerR;

                        var innerArcPixels = innerArcFraction * perimeter;

                        if(innerArcPixels > 16) {
                            return this.point.name;
                        }
                    }
                },
                levels: [{
                        level: 2,
                        colorByPoint: true,
                        dataLabels: {
                            rotationMode: 'parallel'
                        }
                    },
                    {
                        level: 3,
                        colorVariation: {
                            key: 'brightness',
                            to: -0.5
                        }
                    }

                ]

            }],
            tooltip: {
                headerFormat: '',
                pointFormat: '<b>{point.name}</b>的人口数量是:<b>{point.value}</b>'
            }
        }
        return rdata;
    }

    //动态加载的直线图
    this.splineOption = function(svalue) {
        var dataSpline = {
            chart: {
                //                backgroundColor: 'rgba(255, 255, 255, 0)',
                type: 'spline',
                animation: Highcharts.svg, // don't animate in old IE
                marginRight: 10,
                events: {
                    load: function() {
                        // set up the updating of the chart each second
                        var series = this.series[0],
                            chart = this;
                        setInterval(function() {
                            var x = (new Date()).getTime(), // current time
                                y = Math.random();
                            series.addPoint([x, y], true, true);
                            ChartPack.activeLastPointToolip(chart)
                        }, 1000);
                    }
                }
            },
            title: {
                text: '动态模拟实时数据'
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150
            },
            yAxis: {
                title: {
                    text: '值'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {
                    return '<b>' + this.series.name + '</b><br/>' +
                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                        Highcharts.numberFormat(this.y, 2);
                }
            },
            legend: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            series: [{
                name: '随机数据',
                data: (function() {
                    // generate an array of random data
                    var data = [],
                        time = (new Date()).getTime(),
                        i;
                    for(i = -19; i <= 0; i += 1) {
                        data.push({
                            x: time + i * 1000,
                            y: Math.random()
                        });
                    }
                    return data;
                }())
            }]

        }
        return dataSpline;
    }

}
ChartPack.activeLastPointToolip = function(chart) {
    var points = chart.series[0].points;
    chart.tooltip.refresh(points[points.length - 1]);
}

--粗滤封装   可以多交流  亲测可用

 

 

 

 


 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部