Question

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

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

非常接近：

＆＃13;

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

＆＃13;

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

＆＃13;

这个问题是列从顶部下来，排名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

Answer 2

这是一个有趣且有趣的谜题！

我认为 nagyben的答案是一个很好的，我的代码基于他们的反转分数的方法得出相对等级。

这是我根据这个概念创建的一个工作小提琴，以及我在下面分享的几个增强功能：https://jsfiddle.net/brightmatrix/j4ug40qm/

我添加了一个排序函数，无论数据如何在原始的两个数组中排列，都按降序排列数据。为此，我首先将两个数组合并为一个Javascript对象。
我将格式更改为列（垂直）图表到条形（水平）图表。这将使您的用户更具可读性。
我更新了工具提示，以便在用户将光标悬停在特定条形图上时显示玩家的等级。
我删除了这种图表中不需要的某些图表元素，例如图例，网格线和轴标签（因为您只是在进行排名，每个条形的真实值与用户）。

这是我在此构建的排序代码：

// combine both arrays into a single object so we can then sort them by rank
var rankArray = [];
$.each(player_name_array, function(index) {
  tempArray = {};
  tempArray['name'] = player_name_array[index];
  tempArray['y'] = 1 / series_array[index];
  rankArray.push(tempArray);
});

// sort the objects by rank (the "y" value) in descending order (due to the inverse)
// see accepted answer by Stobor at:
// http://stackoverflow.com/questions/979256/sorting-an-array-of-javascript-objects
rankArray.sort(function(a, b) {
  return parseFloat(b.y) - parseFloat(a.y);
});

这是更新的图表选项：

rankings_chart = new Highcharts.Chart({
  chart: {
    renderTo:'rankings_chart',
    type: 'bar'  // chose a bar vs. column chart so the player names are easier to read
  },
  title: { text: 'Draft Rankings' },
  subtitle: { text: 'Source: The Internet' },
  legend: { enabled: false },  // there is no legend needed for this chart
  xAxis: {
    type: 'category',
    tickmarkPlacement: 'on'  // place the lines directly on the player's name
  },
  yAxis: {
    // we're measuring by rank, so there's no need for labels, gridlines, or a title
    labels: { enabled: false },
    title: { enabled: false },
    gridLineWidth: 0
  },
  tooltip: {
    pointFormatter: function() {
        // show the rank of the player, based on their sort order
      return 'ranked #' + parseInt(this.x+1);
    }
  },
  plotOptions: {
    bar: {
      groupPadding: 0.1,
      pointPadding: 0.2,
      borderWidth: 0
    }
  },
  series : [{
    name : 'Draft Data',
    data : rankArray  // our array will look like this: [{name: 'NAME', y: 0}, ...]
  }]
});

结果如下：

我希望这对您的图表转换有所帮助。

Answer 3

由于您似乎已经为数据设置了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;
        }())
    }]

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

在这种情况下，我会隐藏yaxis标签，而是在带有等级的列上添加注释。

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

Highcharts绘制柱高的倒数值

3 个答案: