グラフィックライブラリNivo#02の使用

図面を正しく表示

前回の文章では、まず置いておきましょう.私はそう思います.今回は取引量を全部高くしたいです.
まずNivoが望むデータの形態は[{...},{...},{...}]という形態である.
これで、プロジェクトから提供されるデータ

// map
userDamage[i] =
  { championName: user.championName, [user.championName]: user.totalDamageDealtToChampions };

そう伝えて
です
(Property「championName」は存在しませんが、まずタイプ「object」林エラーを無視します.)
チャンピオン名のみの配列を対応するコードでKeysに入れると、グラフの右側にインデックスが追加されていることがわかります.

まだあります.
チャンピオン名と取引量のキー値が同じ理由は
Nivoでは、indexByに入力したキー値の値を持つ複数のグラフィックが生成されます.

(既存のNivo例では、1つの棒グラフに複数の値がある.)
だからこのように入れてから.

すべてのチャンピオンの名前と取引量が出てきた.
今から造形をしますが、Nivoがカスタム造形をサポートしているかどうか分かりません.

属性の説明

まず、ほとんどの構成部品のプロパティを消去すると、表示される内容が消えてしまうようですので、これらのプロパティについて説明します.

Data、keys、indexByは前述の通りです.

margin

図の余白値

padding

行きましょう.

valueScale

これは、グラフの値を表示する方法についての値です.(linear、logなどあります)

indexScale

typeはbandにしか入れないように設定されていて、具体的にどんな仕事をしているのか分かりません.
(値を変更しても実際のグラフィックには影響しません.)

colors

シナリオを使用して色を変更できます.Nivoはnivoで設定されたdefault schemeで、詳細はNivo Color Schemeです

fill

fill={[
        {
          match: {
            id: "fries",
          },
          id: "dots",
        },
        {
          match: {
            id: "sandwich",
          },
          id: "lines",
        },
      ]}

そうですか.
コアを見ると、必要のない価格のようです.削除すると、グラフには影響しません.(defは私が削除しました.)

borderColor

borderColor={{
        from: "color",
        modifiers: [["darker", 1.6]],
      }}

同じように分解してみた濃い色、明るい色、不透明度の中から選択できます.数は色の強弱です.
でもこのグラフを外しても変わらない...もちろん、数値を変えても変化はありません.

axis

グラフィックの上下左右の値を指定するプロパティです.
トップとrightはnullで、bottomとleftはそれぞれ値があります.

削除すると
左と下の字が消えた.

label

どんな機能があるか分かりません.分かったら追加します.△知っている人はコメントで教えてください.

legend

これらは、グラフの右側のインデックスに関する情報です.\
削除すると、右側のインデックスが消えます.

role, aria

この図がどんな図かを作っているようです.カーネルはstringのみを受け入れ、何もしません.