javascript - 列の高さの逆数値をプロットするハイチャート

Question

ランキングのカテゴリ多軸縦棒グラフをプロットしようとしています。ランキング 1 位が最も高い列で、最も低いランキングが最も短い列になります。

基本的に、バーの高さを逆数にしたいと思います。

それは非常に近いです：

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 が依然として最小の列であることです。

各列の高さの関数を追加する方法はありますか?

score 3 · Accepted Answer

プレーヤーのランキングの逆になるようにデータを設定します。

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

ハイチャートデータを逆ランキングに設定します。

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

働くフィドル

score 2 · Accepted Answer

これは面白くて楽しいパズルでした！

nagyben の答えは素晴らしいものだと思い、スコアを反転して相対的なランクを計算する方法に基づいてコードを作成しました。

これは、その概念に基づいて作成した実用的なフィドルと、以下で共有したいくつかの機能強化です: https://jsfiddle.net/brightmatrix/j4ug40qm/

元の 2 つの配列でデータがどのように配置されていても、データを降順でランク付けするための並べ替え関数を追加しました。これを行うために、まず両方の配列を 1 つの 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}, ...]
  }]
});

結果は次のとおりです。

これがチャートの変換に役立つことを願っています.

score 1 · Accepted Answer

すでにデータの上限を 999 に設定しているようですので、単純に 1000-x をプロットすることをお勧めします。

これを行う 1 つの方法は、シリーズの関数でハイチャートに計算を行わせることです。

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 ラベルを非表示にして、代わりにランクの列に注釈を付けます。

あるいは、縦棒グラフがこのタイプのデータの適切な表現であるかどうかを議論したいと思います。

javascript - 列の高さの逆数値をプロットするハイチャート

3 に答える 3

Related

Reference