Highcharts绘制柱高的倒数值

Bry*_*yan 5 javascript highcharts yaxis

我试图绘制排名的分类多轴柱形图.1号排名应该是最高的列,最低的排名应该是最短的.

基本上我希望酒吧的高度是它的倒数.

它非常接近:

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
  });
Run Code Online (Sandbox Code Playgroud)
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="rankings_chart" ></div>
Run Code Online (Sandbox Code Playgroud)

这个问题是列从顶部下来,排名1仍然是最小的列.

有没有办法为每列的高度添加一个函数?

Max*_*amp 1

由于您似乎已经为数据设置了上限 999,因此我建议简单地绘制 1000-x。

一种方法是让 highcharts 在该系列的函数中进行数学计算:

series : [{
        name : 'Draft Data',
        data : (function () {
            // generate an array of random data
            var data = [];

            for (var x = 0;x <= series_array.length; x += 1) {
                data.push([
                    1000-series_array[x];
                ]);
            }
            return data;
        }())
    }]
Run Code Online (Sandbox Code Playgroud)

JSFiddle: http: //jsfiddle.net/hmjnz/4/

在这种情况下,我将隐藏 yaxis 标签,并将注释放在具有排名的列上。

或者,我会争论柱形图是否足以代表此类数据。