Rechartsを使ってみたけどグラフの使い方って難しい。。

みんなの洋楽ランキングでランキングのグラフを作りたいと思ったのでRechartsに挑戦したけど、結局断念する結果となりそうです。いろんな要因があったので、使い方を含めここで説明しようかと思います。

ランキング形式に向いていない！（っぽい）

ランキングは10位→1位と数が小さくなるほどグラフが上に上がり、通常のグラフは数が大きくなるほとグラフが上に上がります（以下の画像参照）。

ランキング

通常のグラフ

Rechartsでランキング形式にするには非常にめんどくさく、ごまかしながら実装する手法が必要のようです。Reactで実装したのですが、ざっと以下のようになりました。

import React, { Component } from "react"
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip } from "recharts"

export class ChartRanking extends Component {
  render() {
    const data = [
      { name: '', 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6, 7: 7, 8: 8, 9: 9, 10: 10 },
      { name: "a", uv: 1 },
      { name: "b", uv: 3 },
      { name: "c", uv: 2 },
      { name: "d", uv: 4 },
      { name: "e", uv: 3 },
      { name: "f", uv: 2 },
      { name: "g", uv: 4 },
      { name: "h", uv: 5 }
    ]
    return (
      <div className="App">
        <LineChart width={600} height={500} data={data}>
          <XAxis dataKey="name" angle={90} height={90} textAnchor='start'/>
          <YAxis type="category" interval={0} />
          <CartesianGrid strokeDasharray="3 3" />
          <Tooltip />
          <Line dataKey="10" stroke="#ffffff" style={{ display: "none" }} />
          <Line dataKey="9" stroke="#ffffff" style={{ display: "none" }} />
          <Line dataKey="8" stroke="#ffffff" style={{ display: "none" }} />
          <Line dataKey="7" stroke="#ffffff" style={{ display: "none" }} />
          <Line dataKey="6" stroke="#ffffff" style={{ display: "none" }} />
          <Line dataKey="5" stroke="#ffffff" style={{ display: "none" }} />
          <Line dataKey="4" stroke="#ffffff" style={{ display: "none" }} />
          <Line dataKey="3" stroke="#ffffff" style={{ display: "none" }} />
          <Line dataKey="2" stroke="#ffffff" style={{ display: "none" }} />
          <Line dataKey="1" stroke="#ffffff" style={{ display: "none" }} />
          <Line dataKey="uv" stroke="#8884d8" />
        </LineChart>
      </div>
    )
  }
}

微妙①

かなりごまかしごまかしで実装する必要があります。
これとか↓

{ name: '', 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6, 7: 7, 8: 8, 9: 9, 10: 10 },
...
<Line dataKey="10" stroke="#ffffff" style={{ display: "none" }} />
<Line dataKey="9" stroke="#ffffff" style={{ display: "none" }} />

詳しい説明はココに書いてあります。

微妙②

データの定義順序に依存しないためにダミーを入れてるので１列目が空白になっちゃう。

微妙③

これはRecharts関係ないですが、X軸が増えるとサイズが大きくなります。スマホだと横スクロールは微妙なので何列にするか制限かける必要があり非常に微妙です。

その他、Quitaに書いてなかったこと

ラベルの開始位置？

textAnchor='start'

textAnchor='end'

Y軸の間隔調整

// 数値が大きいほど間隔が大きくなる
interval={0}

結構機能は揃っているので、深掘りすればいい感じになるのかも知れませんがそこまでする必要がない理由が出てきました。

ランキングにグラフは不要

折れ線グラフは時間の経過に応じて変化する情報を見るものですが、ランキングは時間の変化によって読みとれる情報がほとんどないことがわかりました。例えば３位から１位に変化した場合に順位が上がったの要因が想像出来ません。それだとユーザーからみてなんとなくヒットしたんだろうなー程度の間隔で終わってしまうことが想像出来ました。

スマホには向かない

先ほども述べましたが、X軸が増えると横幅が大きくなります。そのために数を制限してグラフを作っても正しいデータじゃないのであまり意味がないと判断しました。ちなみに洋楽はトップ10に20周ランクインする曲が普通にあるのでX軸が増える可能性が高いのです。以下のようなスマホでグラフを実装してるアプリがありますが、やっぱりデータから読みとれる情報が少ないとあまり意味がなさないですね。

アップルのヘルスケアアプリですが、数値が低いとサポッたか体調が悪かったかなど読み取れます。

別にグラフじゃなくていいんじゃないかな

某ブログでエクセルで作ったグラフを乗っけているマニアの人がいて、いいなぁ〜と思いましたがユーザーからするとマニアックな情報なんてそうそう必要ないんじゃないかと思いました。みんなの洋楽ランキングの記事を見てくれた曲がどれだけヒットしているか知ってほしいので、グラフじゃなく数値で示せればある程度はいいのでは？と思いました。Spotifyのpopularityって項目はアーティストがどれだけ知名度があるか示している項目で100に近づけばだいたい知ってるよって指標になっています。あと、どれだけヒットしているか知ってほしい理由として注目されているものほど興味がわくという研究結果が出ている（どっかの記事でみた）ので他のページも見てくれるだろうと思っています。

なんかキュレーションサイトって簡単そうに見えて結構難しいんだなーと実感しました。