如何使用長條圖上的反應圖表顯示標籤來視覺化長條圖

要使用react-chartjs-2在React中建立條形圖並直接在條形圖上顯示標籤（而不是在工具提示中），您可以結合使用react- chartjs-2函式庫使用Chart.js DataLabels 外掛程式。

實作步驟

1. 安裝所需的函式庫：確保您的專案中安裝了react-chartjs-2和chart.js。此外，安裝 Chartjs-plugin-datalabels 外掛程式：

1. 匯入必要的元件：匯入圖表元件、插件，並將其註冊到 Chart.js。

2. 設定圖表配置：配置選項物件以包含資料標籤外掛程式。

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

範例程式碼

以下是建立長條圖的範例，其標籤直接顯示在長條上：

從「react」匯入React；
從“react-chartjs-2”導入{Bar}；
進口 {
  圖表為 ChartJS，
  類別規模，
  線性刻度，
  條形元素，
  標題，
  工具提示，
  傳奇，
來自“chart.js”；
從“chartjs-plugin-datalabels”導入 ChartDataLabels；

// 註冊Chart.js元件和插件
ChartJS.註冊(
  類別規模，
  線性刻度，
  條形元素，
  標題，
  工具提示，
  傳奇，
  ChartDataLabels // 註冊DataLabels插件
）；

const BarChartWithLabels = () =>; {
  // 圖表數據
  常量資料 = {
    標籤：[“一月”，“二月”，“三月”，“四月”，“五月”]，
    數據集：[
      {
        標籤：“銷售”，
        數據：[30,20,50,40,60],
        背景顏色: "rgba(75, 192, 192, 0.6)",
        borderColor: "rgba(75, 192, 192, 1)",
        邊框寬度：1，
      },
    ],
  };

  // 圖表選項
  常數選項 = {
    響應：真實，
    插件：{
      傳奇： {
        顯示：真實，
        位置：“頂部”，
      },
      數據標籤：{
        color: "black", // 標籤顏色
        anchor: "end", // 將標籤定位在長條邊緣附近
        align: "top", // 將標籤與欄頂部對齊
        格式化程式：（值）=> value, // 設定標籤格式（例如，顯示值）
      },
    },
    尺度：{
      y：{
        開始於零：正確，
      },
    },
  };

  返回 （
    <div>



<p>為您進行品質檢查：</p>

<ul>
<li>使用堆疊條時如何為每個資料集自訂資料標籤？ </li>
</ul>


          </div>

            
        

以上是如何使用長條圖上的反應圖表顯示標籤來視覺化長條圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！