棒グラフに反応チャート表示ラベルを付けて棒グラフを視覚化する方法

react-chartjs-2 を使用して React で棒グラフを作成し、(ツールチップではなく) 棒に直接ラベルを表示するには、react-chartjs-2 ライブラリを組み合わせて使用​​できます。 Chart.js DataLabels プラグインを使用します。

実装手順

1. 必要なライブラリをインストールします。react-chartjs-2 と chart.js の両方がプロジェクトにインストールされていることを確認してください。さらに、chartjs-plugin-datalabels プラグインをインストールします。

npm install react-chartjs-2 chart.js chartjs-plugin-datalabels

1. 必要なコンポーネントのインポート: チャート コンポーネント、プラグインをインポートし、Chart.js に登録します。

2. チャート構成のセットアップ: データラベル プラグインを含めるようにオプション オブジェクトを構成します。

3. チャートをレンダリングする: チャートをレンダリングするには、react-chartjs-2 の Bar コンポーネントを使用します。

コード例

これは、棒にラベルを直接表示した棒グラフを作成する例です:

「反応」から React をインポートします。
「react-chartjs-2」から { Bar } をインポートします。
輸入 {
  ChartJSとしてのチャート、
  カテゴリスケール、
  リニアスケール、
  バー要素、
  タイトル、
  ツールチップ、
  伝説、
「chart.js」から;
「chartjs-plugin-datalabels」からChartDataLabelsをインポートします。

// Chart.js コンポーネントとプラグインを登録します
ChartJS.register(
  カテゴリスケール、
  リニアスケール、
  バー要素、
  タイトル、
  ツールチップ、
  伝説、
  ChartDataLabels // DataLabels プラグインを登録します
);

const BarChartWithLabels = () => {
  // チャートデータ
  定数データ = {
    ラベル: ["1 月"、"2 月"、"3 月"、"4 月"、"5 月"]、
    データセット: [
      {
        ラベル: "販売"、
        データ: [30、20、50、40、60]、
        背景色: "rgba(75, 192, 192, 0.6)",
        borderColor: "rgba(75, 192, 192, 1)",
        境界幅: 1、
      }、
    ]、
  };

  // チャートのオプション
  const オプション = {
    応答性: true、
    プラグイン: {
      伝説： {
        表示: true、
        位置: 「トップ」、
      }、
      データラベル: {
        color: "black", // ラベルの色
        anchor: "end", // ラベルをバーの端近くに配置します
        align: "top", // ラベルをバーの上部に揃えます
        フォーマッタ: (値) => value, // ラベルをフォーマットします (例: 値を表示します)
      }、
    }、
    スケール: {
      y: {
        beginAtZero: true、
      }、
    }、
  };

  戻る （
    <div>



<p>あなたのための QA:</p>

<ul>
<li>積み上げ棒を使用するときに各データセットのデータラベルをカスタマイズする方法?</li>
</ul>


          </div>

            
        

以上が棒グラフに反応チャート表示ラベルを付けて棒グラフを視覚化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。