要使用react-chartjs-2在React中創(chuàng)建條形圖并直接在條形圖上顯示標(biāo)簽（而不是在工具提示中），您可以結(jié)合使用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. 導(dǎo)入必要的組件：導(dǎo)入圖表組件、插件，并將其注冊到 Chart.js。

2. 設(shè)置圖表配置：配置選項對象以包含數(shù)據(jù)標(biāo)簽插件。

3. 渲染圖表：使用react-chartjs-2中的Bar組件來渲染圖表。

示例代碼

以下是創(chuàng)建條形圖的示例，其標(biāo)簽直接顯示在條形上：

從“react”導(dǎo)入React；
從“react-chartjs-2”導(dǎo)入{Bar}；
進(jìn)口 {
  圖表為 ChartJS，
  類別規(guī)模，
  線性刻度，
  條形元素，
  標(biāo)題，
  工具提示，
  傳奇，
來自“chart.js”；
從“chartjs-plugin-datalabels”導(dǎo)入 ChartDataLabels；

// 注冊Chart.js組件和插件
ChartJS.注冊(
  類別規(guī)模，
  線性刻度，
  條形元素，
  標(biāo)題，
  工具提示，
  傳奇，
  ChartDataLabels // 注冊DataLabels插件
）；

const BarChartWithLabels = () =>; {
  // 圖表數(shù)據(jù)
  常量數(shù)據(jù) = {
    標(biāo)簽：[“一月”，“二月”，“三月”，“四月”，“五月”]，
    數(shù)據(jù)集：[
      {
        標(biāo)簽：“銷售”，
        數(shù)據(jù)：[30,20,50,40,60],
        背景顏色: "rgba(75, 192, 192, 0.6)",
        borderColor: "rgba(75, 192, 192, 1)",
        邊框?qū)挾龋?，
      },
    ],
  };

  // 圖表選項
  常量選項 = {
    響應(yīng)：真實，
    插件：{
      傳奇： {
        顯示：真實，
        位置：“頂部”，
      },
      數(shù)據(jù)標(biāo)簽：{
        color: "black", // 標(biāo)簽顏色
        anchor: "end", // 將標(biāo)簽定位在條形邊緣附近
        align: "top", // 將標(biāo)簽與欄頂部對齊
        格式化程序：（值）=> value, // 設(shè)置標(biāo)簽格式（例如，顯示值）
      },
    },
    尺度：{
      y：{
        開始于零：正確，
      },
    },
  };

  返回 （
    <div>



<p>為您進(jìn)行質(zhì)量檢查：</p>

<ul>
<li>使用堆疊條時如何為每個數(shù)據(jù)集自定義數(shù)據(jù)標(biāo)簽？</li>
</ul>


          </div>

            
        

以上是如何使用條形圖上的反應(yīng)圖表顯示標(biāo)簽來可視化條形圖的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！