javascript - Highcharts 绘制列高度的倒数

Question

我正在尝试绘制一个分类的多轴排名柱形图。排名第一的应该是最高的列，最低的排名应该是最短的。

基本上我希望条形的高度是倒数。

非常接近:

var player_name_array = ["Aaron Rodgers", "Andrew Luck", "Drew Brees", "Russell Wilson", "Peyton Manning", "Ryan Tannehill", "Tony Romo", "Matt Ryan", "Cam Newton", "Ben Roethlisberger", "Eli Manning", "Philip Rivers", "Colin Kaepernick", "Teddy Bridgewater", "Marcus Mariota", "Matthew Stafford", "Robert Griffin III", "Joe Flacco", "Jay Cutler", "Sam Bradford"];

var series_array = [{"name":"espn_ranking","data":[38,33,63,64,67,95,75,85,96,76,999,999,999,999,999,999,999,999,999,999]}];

rankings_chart = new Highcharts.Chart({
        chart: {
            renderTo:'rankings_chart',
            type: 'column'
        },
        title: {
            text: 'Draft Rankings'
        },
        subtitle: {
            text: 'Source: The Internet'
        },
        xAxis: {
            categories: player_name_array,
            crosshair: true
        },
        yAxis: {
            type: 'logarithmic',
            //reversed: true,
            title: {
                text: 'Draft Rankings'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:14px"><b>{point.key}</b></span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y}</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            series: {
                stacking:'normal',
            },
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        rangeSelector: {
          selected: 1
        },
        series: series_array
  });

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="rankings_chart" ></div>

问题是列从顶部下降，排名 1 仍然是最小的列。

有什么方法可以为每列的高度添加一个函数吗？

Answer 1

将您的数据设置为玩家排名的倒数:

var rankings = [38,33,63,64,67,95,75,85,96,76,999,999,999,999,999,999,999,999,999,999]
var inv_rankings = [];
for (i = 0; i < rankings.length; i++) {
    inv_rankings[i] = 1 / rankings[i]
}

将您的 Highcharts 数据设置为您的反向排名:

series: {
    name: "espn_ranking",
    data: inv_rankings
}

对数据标签和工具提示使用格式化程序以返回倒数的倒数(即原始值):

plotOptions: {
    series: {
        dataLabels: {
            enabled: true,
            formatter: function() {
                return 1 / this.y;
            }
        }
    },
    tooltip: {
        pointFormatter: function() {
            return 1 / this.y;
        }
    }
}

Working fiddle