Highcharts Diagramm reziproke Werte für Spaltenhöhe

Question

Ich versuche, eine kategorische mehrachsige Spalte Diagramm der Rankings zu plotten. Die Nummer 1 sollte die höchste Spalte und die niedrigste die kürzeste sein.

Im Wesentlichen möchte ich die Höhe der Bar sein, es ist reziprok.

Es ist ganz in der Nähe:

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>

Das Problem dabei ist, die Spalten kommen von oben nach unten und Ranking von 1 ist immer noch die kleinste Spalte.

Gibt es eine Möglichkeit, eine Funktion für die Höhe jeder Spalte hinzuzufügen?

Answer 1

Da Sie anscheinend bereits eine Obergrenze von 999 für Ihre Daten festgelegt haben, würde ich vorschlagen, einfach 1000-x zu zeichnen.

Eine Möglichkeit, das zu tun ist highcharts die Mathematik in einer Funktion für die Serie zu lassen:

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/

In diesem Fall ich das yaxis Label verstecken würde und stattdessen Anmerkungen setzen auf den Spalten mit dem Rang.

Alternativ würde ich debattieren, ob ein Säulendiagramm eine angemessene Darstellung für diese Art von Daten ist.

Answer 2

Richten Sie Ihre Daten die Umkehrung des Spielers Ranking sein:

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

Ihre Highcharts Daten Legen Sie Ihre inverse Ranking sein:

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

Verwenden Sie ein Formatierungsprogramm für die Datenbeschriftungen und Tooltip um den Kehrwert des Kehrwerts (dh den ursprünglichen Wert) zurückzugeben:

Working fiddle

Answer 3

Dies war ein interessantes und lustiges Puzzle zum trainieren!

Ich dachte die Antwort von Nagyben war eine ausgezeichnete, und ich basierte meinen Code auf ihre Methode der Invertierung der Punkte, um mit einem relativen Rang zu kommen.

Hier ist eine Arbeits Geige ich an diesem Konzept erstellt, zusammen mit einigen Verbesserungen, die ich weiter unten geteilt habe: https://jsfiddle.net/brightmatrix/j4ug40qm/

• ich eine Sortierfunktion hinzugefügt, um die Daten in absteigender Reihenfolge zu ordnen, egal wie Die Daten wurden in den ursprünglichen zwei Arrays angeordnet. Um dies zu tun, habe ich zuerst beide Arrays zu einem einzigen Javascript-Objekt kombiniert.
• Ich habe das Format in eine Spalte (vertikal) zu einem Balken (horizontal) geändert. Dadurch werden die Spielernamen für Ihre Benutzer lesbarer.
• Ich habe den Tooltip aktualisiert, um den Rang des Spielers anzuzeigen, wenn ein Benutzer den Mauszeiger über einen bestimmten Balken bewegt.
• Ich entfernte bestimmte Diagrammelemente, die in dieser Art von Diagramm nicht benötigt werden, wie die Legende, Gitternetzlinien und Achsenbeschriftungen (da Sie einfach einen Rang machen, ist der wahre Wert jedes Balkens nicht relevant für der Benutzer).

Hier ist die Art Code, den ich in diesem Jahr:

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

Und hier ist die aktualisierten Chart Optionen:

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}, ...] 
    }] 
}); 

Hier ist das Ergebnis:

Ich hoffe, das war's hilfreich für Sie in Ihrer Diagrammkonvertierung.