HighCharts显示折线图

initChart:function(data){ //TCI指数初始化
        var $screenWidth = $(window).width();
//        if($screenWidth >= 1440){ //小于1600的不显示TCI指数
            $(".jq-indexChart").each(function(){
                var productType = $(this).attr("product-type"); //当前产品
                var type = this;
                var xAxis=[];
                var series = [];
                var indexArray=[];
                $.each(data,function(key,value){
                    if(key == productType){
                        for(var i = value.length - 1; i >= 0 ; i--){
                            var row=value[i];
                            var time = new Date(Date.parse(row.indexTimeStr.replace(/-/g, "/"))).format("MM/dd");
                            xAxis.push(time);
                            indexArray.push(row.indexNumber);
                        }
                        series.push({name:'数值',data:indexArray, animation: false});

                        //平均区间 = (最高指数值 - 最低指数值)÷7  //原点 = 最低指数值 - 平均区间     //最高点 = 最高指数值 + 平均区间
                        var maxIndexNumber =  Math.max.apply(null, indexArray);   
                        var minIndexNumber =  Math.min.apply(null, indexArray);
                        //平均区间
                        var avgInterval = Math.round((maxIndexNumber - minIndexNumber) / 7);
                        //原点
                        var originalPoint = minIndexNumber - avgInterval;
                        //最高点
                        var maxPoint = maxIndexNumber + avgInterval;
                        
                        Highcharts.chart(type, {
                            chart:{
                                type: 'area'
                            },
                            title: {
                                text: null
                            },
                            xAxis: {
                                categories: xAxis,
                                labels:{enabled:true},
                                tickWidth:0,    //设置刻度标签宽度
                            },
                            yAxis: {
                                title: {
                                    text: ''
                                },
                                labels:{
                                    enabled:false, //不显示y轴
                                    format:'{value}',
                                    style: {
                                        color: '#d1a45f'
                                    }
                                },
                                tickPixelInterval : 2,
                                tickInterval:1000,
                                tickInterval:avgInterval,   //刻度值
                                max : maxPoint,                //最高点
                                min : originalPoint,        //原点
                                plotLines: [{
                                    value: 0,
                                    width: 1,
                                    color: '#808080'
                                }],
                                 gridLineWidth: 0    //不显示网格线
                            },
                            tooltip: {
                                valueSuffix: '',
//                                enabled:false//鼠标移动不显示鼠标提示
                            },
                            legend: {
                                layout: 'vertical',
                                align: 'right',
                                verticalAlign: 'middle',
                                borderWidth: 0,
                                enabled: false
                            },
                            series: series,
                            lang : {
                                noData : "暂无数据"
                            },exporting:{
                                enabled:false//不显示导出
                            },
                            credits : {
                                enabled : false//不显示版权
                            },plotOptions: {
                                series : {
                                    fillColor: {
                                        linearGradient: [0, 0, 0, 80],
                                        stops: [
                                            [0, Highcharts.getOptions().colors[0]],
                                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                                            ]
                                    },
                                    marker: {
                                        radius: 3,  //曲线点半径,默认是4
                                        symbol: 'circle',
                                    },
                                },
                            },
                        });
                    }
                });
            });
//        }
    }

 

posted @ 2018-04-20 11:31  十黎九夏  阅读(2454)  评论(0编辑  收藏  举报