EvalGraph

EvalGraph は、将棋の評価値（エンジンによる形勢判断）の推移をグラフとして表示するコンポーネントです。

データの取得方法

評価値データは useKifuPlayer から自動的に取得できます。 解析済み棋譜（** 解析 コメントが含まれるKIFなど）を useKifuPlayer に渡すと、evaluations プロパティとして自動パースされます。

import { useKifuPlayer, EvalGraph } from 'react-kifu-player';

function PlayerWithGraph({ kifuString }) {
  const player = useKifuPlayer(kifuString);

  return (
    <div>
      {/* EvalGraph には player.evaluations をそのまま渡せる */}
      <EvalGraph
        data={player.evaluations}
        currentPly={player.currentPly}
        onPlyClick={(ply) => player.goto(ply)}
      />
    </div>
  );
}

プロパティ (Props)

Prop名	型	必須	説明
data	EvaluationPoint[]	✅	評価値データの配列
currentPly	number	✅	現在の手数。グラフ上でその手数に縦線が引かれます
onPlyClick	(ply: number) => void		グラフをクリックした際のコールバック。通常はその手数へのシークに使います
branchData	EvaluationPoint[]		分岐再生中の評価値データ（useKifuPlayer の variationEval 等で活用）
maxScore	number		グラフの評価値の上限（デフォルト: 2000）

EvaluationPoint 型

type EvaluationPoint = {
  /** 手数 */
  ply: number;
  /** 評価値 (先手視点、centipawn) */
  score: number;
  /** 詰みの場合の手数 (正=先手勝ち、負=後手勝ち、null=詰みなし) */
  mate: number | null;
};

詰みの表現

mate フィールドが null でない場合は詰み扱いとなり、グラフ上では振り切れた値として表現されます。

実際の動作デモ

以下は EvalGraph の実際の動作デモです。demo.kifu（解析情報入り）を読み込み、useKifuPlayer から evaluations を取得してグラフに表示しています。グラフをクリックするとその手数に移動します。

Loading Demo...