5

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

本质上，我希望酒吧的高度是倒数的。

它非常接近：

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 仍然是最小的列。

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

4

3 回答 3

3

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

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

工作小提琴

于 2016-07-19T12:39:47.657 回答
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}, ...]
  }]
});

结果如下：

在此处输入图像描述

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

于 2016-07-21T12:19:36.713 回答
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;
        }())
    }]

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

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

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

于 2016-07-19T12:20:35.497 回答