一对一直播系统通过 highcharts插件显示柱状图

(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
        ]
    }]
});