码迷,mamicode.com
首页 > 其他好文 > 详细

highchart 柱状图,列宽自适应(x轴是时间的特殊情况)

时间:2018-12-22 20:37:37      阅读:221      评论:0      收藏:0      [点我收藏+]

标签:cin   坐标   png   float   html   lin   radius   shu   12px   

1、柱子列宽自适属性:

pointWidth:25, //柱子宽度,如果设定该值,则下面2个属性无效
pointPadding: 0.4,//每列之间的距离值,默认此值为0.1
groupPadding: 0,//每个值之间的间距,其实和poingPadding有一样的效果。不过这个主要是用于对付存在分组的情况

2、x轴属性设置里面,需要把间隔固定死,否则会出现柱子重叠情况

//表示时间间隔,4小时(如果不固定死,则数据源的量变多时,柱子会出现重叠情况)
tickInterval: 4 * 3600 * 1000,

3、样例代码如下:

var chart = null;
// 获取 CSV 数据并初始化图表
$.getJSON(‘https://data.jianshukeji.com/jsonp?filename=json/usdeur.json&callback=?‘, function (csv) {
    chart = Highcharts.chart(‘container‘, {
        chart: {
            type: ‘column‘,//柱状图column,曲线用line
            zoomType: ‘x‘,//用户鼠标放缩操作
            spacingLeft: 0,//左侧距离
            spacingRight: 0//右侧距离
        },
        title: {
            text: ‘空气质量PM2.5分布‘,
            style: {
                color: ‘#000000‘,
                fontSize: ‘18px‘,
                fontFamily: ‘微软雅黑‘
            },
        },
        subtitle: {
            text: ‘副标题‘
        },
        xAxis: {//x轴的格式
            type: ‘datetime‘,
            //表示时间间隔,4小时(如果不固定死,则数据源的量变多时,柱子会出现重叠情况)
            tickInterval:  4 * 3600 * 1000,
            labels: { style: { fontSize: ‘14px‘, color: ‘#000000‘, } },
            dateTimeLabelFormats: {
                millisecond: ‘%H:%M:%S.%L‘,
                second: ‘%H:%M:%S‘,
                minute: ‘%H:%M‘,
                hour: ‘%H时‘,
                day: ‘%m月%d日‘,
                week: ‘%m-%d‘,
                month: ‘%Y-%m‘,
                year: ‘%Y‘
            }
        },
        yAxis: [{
            title: {//y轴的标题
                text: ‘PM2.5浓度‘,
                style: {
                    color: ‘#000000‘,
                    fontSize: ‘14px‘,
                },
            },
            labels: {//y轴坐标和单位
                format: ‘{value} ug/m3‘,
                style: {
                    color: ‘#000000‘,
                    fontSize: ‘14px‘,
                }
            },
            min: 0
        }],
        legend: {//图例
            align: ‘center‘,
            verticalAlign: ‘bottom‘,
            y: 20,
            floating: true,
            borderWidth: 1
        },
        tooltip: {//鼠标提示框
            shared: true,
            crosshairs: true,
            useHTML: true,
            // 时间格式化字符
            // 默认会根据当前的数据点间隔取对应的值
            // 当前图表中数据点间隔为 1小时,所以配置hour值即可
            dateTimeLabelFormats: {
                day: ‘%Y-%m-%d %H时‘
            }
        },
        credits: {
            enabled: false
        },
        plotOptions: {
            series: {
                marker: {
                    enabled: true,
                    radius: 3
                },
                // 关闭鼠标跟踪,对应的提示框、点击事件会失效
                enableMouseTracking: true,
                turboThreshold: 0
            },
            column: {
                dataLabels: {
                    enabled: true,
                    style: {
                        color: ‘#555‘,
                        fontSize: ‘12px‘,
                        fontFamily: ‘宋体‘,
                        textShadow: false,
                        textOutline: "none"
                    }
                },
                //pointWidth:25, //柱子宽度,如果设定该值,则下面2个属性无效
                pointPadding: 0.4,//每列之间的距离值,默认此值为0.1
                groupPadding: 0,//每个值之间的间距,其实和poingPadding有一样的效果。不过这个主要是用于对付存在分组的情况
                borderWidth: 1,
                shadow: false
            }
        },
        series: [{
            borderRadius: 7,
            color:‘#ff0000‘,
            name: ‘PM2.5‘,
            data: [
                {x:1533430800000,y:39},
                {x:1533427200000,y:50},
                {x:1533423600000,y:50},
                {x:1533420000000,y:45},
                {x:1533416400000,y:45},
                {x:1533412800000,y:45},
                {x:1533409200000,y:45},
                {x:1533405600000,y:45},
                {x:1533402000000,y:46},
                {x:1533398400000,y:51},
                {x:1533394800000,y:45},
                {x:1533391200000,y:46},
                {x:1533387600000,y:38},
                {x:1533384000000,y:42},
                {x:1533380400000,y:47},
                {x:1533376800000,y:46},
                {x:1533373200000,y:81},
                {x:1533369600000,y:41},
                {x:1533366000000,y:41},
                {x:1533362400000,y:45},
                {x:1533358800000,y:47},
                {x:1533355200000,y:51},
                {x:1533351600000,y:46},
                {x:1533348000000,y:51},
                {x:1533344400000,y:50},
            ]
        }]
    });
});

4、效果图如下:

技术分享图片

 

highchart 柱状图,列宽自适应(x轴是时间的特殊情况)

标签:cin   坐标   png   float   html   lin   radius   shu   12px   

原文地址:https://www.cnblogs.com/tiandi/p/10162191.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!