JS，统计图表大全－－二、柱形图（柱状图及条形图）Bar

二、柱状图 Bar

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8"><link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            /* css 代码  */
        </style>
        <script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
        <script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
        <script src="https://code.highcharts.com.cn/highcharts/modules/oldie.js"></script>
        <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    </head>
    <body>
        <div id="container" style="min-width:400px;height:400px"></div>
        <script>
            // JS 代码 
        </script>
    </body>
</html>

1、基础柱状图
在这里插入图片描述

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
};

2、基础柱状图
在这里插入图片描述

var chart = Highcharts.chart('container',{
    chart: {
        type: 'column'
    },
    title: {
        text: '月平均降雨量'
    },
    subtitle: {
        text: '数据来源: WorldClimate.com'
    },
    xAxis: {
        categories: [
            '一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'
        ],
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: '降雨量 (mm)'
        }
    },
    tooltip: {
        // head + 每个 point + footer 拼接成完整的 table
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
        '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            borderWidth: 0
        }
    },
    series: [{
        name: '东京',
        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        name: '纽约',
        data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
    }, {
        name: '伦敦',
        data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
    }, {
        name: '柏林',
        data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
    }]
});

3、基础条形图
在这里插入图片描述

var chart = Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: '各洲不同时间的人口条形图'
    },
    subtitle: {
        text: '数据来源: Wikipedia.org'
    },
    xAxis: {
        categories: ['非洲', '美洲', '亚洲', '欧洲', '大洋洲'],
        title: {
            text: null
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: '人口总量 (百万)',
            align: 'high'
        },
        labels: {
            overflow: 'justify'
        }
    },
    tooltip: {
        valueSuffix: ' 百万'
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true,
                allowOverlap: true // 允许数据标签重叠
            }
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -40,
        y: 100,
        floating: true,
        borderWidth: 1,
        backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
        shadow: true
    },
    series: [{
        name: '1800 年',
        data: [107, 31, 635, 203, 2]
    }, {
        name: '1900 年',
        data: [133, 156, 947, 408, 6]
    }, {
        name: '2008 年',
        data: [973, 914, 4054, 732, 34]
    }]
});

4、人口金字塔
在这里插入图片描述

var categories = ['0-4', '5-9', '10-14', '15-19',
                  '20-24', '25-29', '30-34', '35-39', '40-44',
                  '45-49', '50-54', '55-59', '60-64', '65-69',
                  '70-74', '75-79', '80-84', '85-89', '90-94',
                  '95-99', '100 + '];
var chart = Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: '2015 年德国人口金字塔'
    },
    subtitle: {
        useHTML: true,
        text: '数据来源: <a href="http://populationpyramid.net/germany/2015/">1950 ~ 2100 年世界人口金字塔</a>'
    },
    xAxis: [{
        categories: categories,
        reversed: false,
        labels: {
            step: 1
        }
    }, { 
        // 显示在右侧的镜像 xAxis （通过 linkedTo 与第一个 xAxis 关联）
        opposite: true, 
        reversed: false,
        categories: categories,
        linkedTo: 0,
        labels: {
            step: 1
        }
    }],
    yAxis: {
        title: {
            text: null
        },
        labels: {
            formatter: function () {
                return (Math.abs(this.value) / 1000000) + 'M';
            }
        },
        min: -4000000,
        max: 4000000
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    tooltip: {
        formatter: function () {
            return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
                '人口: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
        }
    },
    series: [{
        name: '男',
        data: [-1746181, -1884428, -2089758, -2222362, -2537431, -2507081, -2443179,
               -2664537, -3556505, -3680231, -3143062, -2721122, -2229181, -2227768,
               -2176300, -1329968, -836804, -354784, -90569, -28367, -3878]
    }, {
        name: '女',
        data: [1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874,
               3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638,
               1447162, 1005011, 330870, 130632, 21208]
    }]
});

xcbzsy

发布了34 篇原创文章 · 获赞 2 · 访问量 889

私信关注

JS，统计图表大全－－二、柱形图（柱状图及条形图）Bar

二、柱状图 Bar

猜你喜欢