zoukankan      html  css  js  c++  java
  • highcharts控制X刻度值整数调整

    function chartData() {
            var app_id = $('.app_id').attr('app_id');
            var gener_id = $('.gener_id').attr('gener_id');
            var pop_id = $('.listType li.active').attr('pop_id');
            var date = $(".realTimeDate li.active span").attr("date");
            $.ajax({
                url:'/app/rankChange',
                type:'post',
                data:{
                    app_id:app_id,
                    gener_id:gener_id,
                    pop_id:pop_id,
                    date:date,
                },
                success:function (data) {
                    chartLoad(data.data)
                },
                dataType:'json'
            })
        }
    
    	var arr = [];
    	var arr1 = [];
        function chartLoad(data){
            var gener_name = $(".gener_id").text();
    		console.log(data);
    
    	
    		for(var i=0;i<data.rank_app_list.length;i++){
    			console.log(data.rank_total_list[i]);
    			arr.push(data.rank_app_list[i]);
    			i = i+2;
    		}
    		for(var k=0;k<data.rank_total_list.length;k++){
    			console.log(data.rank_total_list[k]);
    			arr1.push(data.rank_total_list[k]);
    			k = k+2;
    		}
            $('#container').highcharts({
                //tooltip控制折线图
                tooltip:{
                    shared: true,//控制多个产品共同显示内容
                    crosshairs: true,//让y轴坐标显示
                },
                credits: {
                    enabled: false//去掉链接
                },
                exporting:{
                    enabled:false //用来设置是否显示‘打印’,'导出'等功能按钮,不设置时默认为true
                },
                //折线图颜色
                colors:['#33CC99','#FF6565'],
                title: {
                    text: '排名趋势'
                },
                xAxis:{
                    // gridLineWidth : 1
                    // inverted: Boolean
                    categories: ["0:00","3:00","6:00","9:00","12:00","15:00","18:00","21:00","00:00"],
                    showFirstLabel: true,
                    reversed: false
                },
                yAxis:[
                    {
                        title: {
                            text: '应用榜排名'
                        },
                        reversed: true
                    },
                    {
                        title: {
                            text: gener_name+'排名'
                        },
                        reversed: true,
                        opposite: true
                    }
                ],
                legend: {
                    layout: 'vertical',
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom',
                    x: 0,
                    y: 0
                },
                plotOptions: {
                    series: {
                        label: {
                            connectorAllowed: true,
                        },
                        pointStart: 1,//时间刻度值  X轴坐标
                    }
                },
                series: [{
                    yAxis:0,
                    name: '应用总榜',
                    data: arr1
                }, {
                    yAxis:1,
                    name: gener_name,
                    data: arr
                }],
                responsive: {
                    rules: [{
                        condition: {
                            maxWidth: 300
                        },
                        chartOptions: {
                            legend: {
                                layout: 'horizontal',
                                align: 'center',
                                verticalAlign: 'bottom'
                            }
                        }
                    }]
                }
            });
        }
    chartData()
    

      

  • 相关阅读:
    Selenium(一):元素定位
    白盒测试系列(五)条件组合覆盖
    LDAP(轻型目录访问协议)
    Spring Intorduce、History and Design Philosophy
    CORS
    mysql创建用户并授权某个数据库
    Introduce Servlet 、Filter
    web.xml的简单解释以及Hello1中web.xml的简单分析
    ANNOTATION and analyse hello1.java
    Analysis of container and Injection in Java, their history and future.
  • 原文地址:https://www.cnblogs.com/marksir/p/11712583.html
Copyright © 2011-2022 走看看