通过highcharts插件显示柱状图qq14874791的博客-

(1) 引用的js文件。可以去https://jshare.com.cn/demos/hhhhDf 下载
    <script src=”highchart/highcharts.js”></script>
    <script src=”highchart/exporting.js”></script>
(2) html 代码。
    <div id=”mainOne” style=”width:50%;height:500px;float:left;”>
                                    
    </div>    
(3) js代码。
    var chart = Highcharts.chart(‘mainOne’, {
        chart: 
        {
            type: ‘column’, 
            inverted: true
        },
        title: 
        {
            text: ‘每月温度变化范围’
        },
        exporting: {
            buttons: {
                contextButton: {
                    menuItems: [{
                            text: ‘Download PDF’,
                            onclick: function() {
                                this.exportChart({type: ‘application/pdf’, filename: ‘curated_by_species’});
                            }
                        }, {
                            text: ‘Download PNG’,
                            onclick: function() {
                                this.exportChart({filename: ‘curated_by_species’});
                            },
                            separator: false
                        }]
                }
            }
        },
        subtitle: 
        {
            text: ‘2009 挪威某地’
        },
        xAxis: 
        {
            categories: 
                [
                    “amyloid-beta degradation”,
                    “antibody production”,
                    “anti-fungal response”,
                    “antigen presentation”,
                    “antigen processing”,
                    “antiviral response”,
                    “bacteria-killing ability”,
                    “cell activation”,
                    “cell adhesion”,
                    “cell aggregation”,
                    “cell aging”,
                    “cell apoptosis”,
                    “cell autophagy”,
                    “cell chemotaxis”,
                    “cell cycling”,
                    “cell cytotoxicity”,
                    “cell degranulation”,
                    “cell development”,
                    “cell differentiation”,
                    “cell engraftment”,
                    “cell exhaustion”,
                    “cell homing”,
                    “cell maintenance”
                 ]
            
        },
        yAxis: 
        {
            title: 
            {
                text: ‘number’
            },
            tickPositions: [0, 330, 660, 990,1320,1650] // 指定竖轴坐标点的值
        },
        
        tooltip: 
        {
            valueSuffix: ‘ ‘
        },
        plotOptions: 
        {
            columnrange: 
            {
                dataLabels:
                {
                    enabled: true,
                    formatter: function () 
                    {
                        return this.y;
                    }
                }
            }
        },
        
        legend: 
        {
            enabled: false
        },
        credits: 
        {
            enabled:false
        },
        series: [{
            name: ‘number’,
            data: 
            [
                2,
                31,
                3,
                29,
                9,
                206,
                96,
                379,
                60,
                9,
                38,
                324,
                78,
                31,
                17,
                102,
                10,
                242,
                1605,
                42,
                20,
                17,
                42
            ]
        }]
    });
(4) 最后的效果图如下所示。