Wzorcowe wartości wzorca Highcharts dla wysokości kolumny

Question

Próbuję wykreować kategoryczny wieloosiowy wykres kolumnowy w rankingach. Ranking numer 1 powinien być najwyższą kolumną, a najniższy - najkrótszą.

Zasadniczo chciałbym, aby wysokość poprzeczki była odwrotna.

Jest bardzo blisko do:

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>

Problemem jest to kolumny zstąpił z góry i rankingu 1 jest nadal najmniejszy kolumna.

Czy istnieje sposób dodania funkcji dla wysokości każdej kolumny?

Answer 1

Ponieważ wydaje się, że masz już ustawiony górny limit 999 dla danych, proponuję po prostu wykreślić 1000-x.

Jednym ze sposobów, aby to zrobić, to pozwolić highcharts do matematyki w funkcji dla serii:

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/

w tym przypadku byłoby ukryć etykietę yAxis i zamiast umieścić adnotacje na kolumnach o randze.

Alternatywnie, zastanawiałbym się, czy wykres kolumnowy jest wystarczającą reprezentacją tego typu danych.

Answer 2

Skonfiguruj dane być odwrotnością rankingu zawodnik:

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

Określ dane Highcharts być ranking odwrotny:

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

Użyj formater na etykietach danych i podpowiedzi zwrócić odwrotność odwrotności (tj. oryginalną wartość):

plotOptions: { 
    series: { 
     dataLabels: { 
      enabled: true, 
      formatter: function() { 
       return 1/this.y; 
      } 
     } 
    }, 
    tooltip: { 
     pointFormatter: function() { 
      return 1/this.y; 
     } 
    } 
} 

Working fiddle

Answer 3

To była ciekawa i zabawna zagadka do wymyślenia!

Myślałem, że Odpowiedź od nagybena była doskonała, a ja oparłem swój kod na metodzie odwracania wyników, aby uzyskać względną rangę.

Oto skrzypce roboczego I utworzone na podstawie tej koncepcji, wraz z kilkoma ulepszeniami, które mam współdzielonych poniżej: https://jsfiddle.net/brightmatrix/j4ug40qm/

• dodałem funkcję sortowania oceniającym dane w kolejności malejącej, bez względu na to, w jaki sposób dane zostały ułożone w dwóch oryginalnych tablicach. W tym celu połączyłem obie tablice w jeden obiekt JavaScript.
• Zmieniłem format na wykres kolumnowy (pionowy) na wykres słupkowy (poziomy). Dzięki temu nazwy graczy będą bardziej czytelne dla użytkowników.
• Zaktualizowałem podpowiedź, aby pokazać stopień gracza za każdym razem, gdy użytkownik najedzie kursorem na konkretny pasek.
• Usunąłem niektóre elementy wykresu, które nie są potrzebne na tego rodzaju wykresie, takie jak legenda, linie siatki i etykiety osi (ponieważ po prostu robisz rangę, prawdziwa wartość każdego taktu nie ma związku z użytkownik).

Oto kod sortowania, że ​​wbudowany w ten sposób:

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

i tu jest aktualizowane opcje wykresu:

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

Oto wynik:

Mam nadzieję, że tak było pomocne w konwersji wykresu.