使用 Highcharts 配置简单的条形图

Question

我正在尝试使用 Highcharts 创建简单的条形图。我正在尝试使用这个例子 https://jsfiddle.net/otm0oq2c/3/ 创建条形图。注意我尝试从 jsfiddle 在编辑器中插入相同的代码，但它不起作用。 我的问题是我不知道如何将其转换为

我查看了各种高图表示例，但找不到与我的屏幕截图类似的示例。

$(function () {
    var colors = ['blue','green','yellow','orange','red'];
    var names = ['First', 'Second','Third','Fourth','Fifth'];
 
    $('#container').highcharts({

        chart: {
            type: 'bar',
        },
        legend: {
            enabled: true,
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            labelFormatter: function() {
                return this.name + " - <span class='total'>"+this.y+"</span>"
            }
        },
        title: {
            text: 'Simple Bar Graph'
        },
        xAxis: {
            categories: ['First', 'Second', 'Third', 'Fourth', , 'Fifth'],
            allowDecimals: false
        },
        yAxis: {
            allowDecimals: false
        },
        plotOptions: {
            series: {
                events: {
                    legendItemClick: function (x) {
                        var i = this.index  - 1;
                        var series = this.chart.series[0];
                        var point = series.points[i];   

                        if(point.oldY == undefined)
                           point.oldY = point.y;

                        point.update({y: point.y != null ? null : point.oldY});
                    }
                }
            }
        },
        legend: {
            labelFormatter: function(){
                return names[this.index-1];
            }
        },
        series: [
            {
                pointWidth:20,
                color: colors[0],
                showInLegend:false,
                data: [
                    {y: 6, name: 'First', color: colors[0]},
                    {y: 7, name: 'Second', color: colors[1]},
                    {y: 9, name: 'Third', color: colors[2]},
                    {y: 1, name: 'Fourth', color: colors[3]},
                    {y: 1, name: 'Fifth', color: colors[4]}
                ]
            },
            {color: 'blue'},
            {color: 'green'},
            {color: 'yellow'},
            {color: 'orange'},
            {color: 'red'}
            
        ],

    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<h2>How to make this:</h2>
<div id="container" style="height: 300px"></div>
<h2>... look like this:</h2>

Answer 1

创建与所提供的屏幕截图类似的图表的最简单方法是将数据简单地拆分为单独的系列，而不是创建具有多个数据点的单个系列。您还可以启用

dataLabels

并使用

pointFormat

字符串模板格式化其输出，以便满足您的要求：

dataLabels: {
    enabled: true,
    pointFormat: 'Average rank {point.y}'
}

演示：https://jsfiddle.net/BlackLabel/v96dmz8p/

API：
https://api.highcharts.com/highcharts/plotOptions.bar.color https://api.highcharts.com/highcharts/plotOptions.bar.dataLabels https://api.highcharts.com/highcharts/plotOptions.bar.dataLabels.pointFormat https://api.highcharts.com/highcharts/plotOptions.bar.centerInCategory