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',
                                    },
                                },
                            },
                        });
                    }
                });
            });
//        }
    }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM