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()
    

      

  • 相关阅读:
    关于sqlite数据库在使用过程中应该注意以下几点
    关于THREAD线程中CurrentCulture与CurrentUICulture的学习
    转:ASP.NET MVC3升级到ASP.NET MVC4
    win8 iis安装及网站发布
    转: CKEditor/CKFinder升级心得
    [更新]Windows Phone 实现类似“微博”下拉刷新效果
    EntityFramework中使用Include可能带来的问题
    [更新]Luke.Net for Pangu 盘古分词版更新
    文件大小友好显示类
    找出最慢的查询语句Find your slowest queries
  • 原文地址:https://www.cnblogs.com/marksir/p/11712583.html
Copyright © 2011-2022 走看看