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>

的问题，这是列来自顶部和第一的排名下降仍然是最小的列。

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

Answer 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/

在这种情况下，我会隐藏y轴的标签，而是把注解在与排名的列上。

或者我会辩论一个柱形图是否足够表示这种类型的数据。

Answer 2

设置你的数据是玩家排名的倒数：

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 3

这是一个有趣和有趣的难题，制定出来！

我以为由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}, ...] 
    }] 
}); 

这里的结果：

我希望这一直是在图表转换中对您有帮助。