日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

在當今數據驅動的世界中，有效可視化數據的能力比以往任何時候都更加重要。無論您是數據科學家、開發人員還是業務分析師，創建富有洞察力的交互式圖表都可以幫助您清晰地傳達復雜的信息。用于此目的的最佳工具之一是 recharts——一個完全基于 react 組件構建的可組合圖表庫。在這篇博文中，我們將深入探討 recharts 的獨特之處以及如何使用它來增強數據可視化功能。

什么是重新圖表？

這個圖表庫是一個開源的聲明式解決方案，專為 react 應用程序設計。與許多其他配置和集成很麻煩的圖表庫不同，該庫經過精心設計，可高度定制且易于使用。通過利用 react 的強大功能，它允許開發人員以最小的努力創建復雜的交互式圖表。

使該庫與其他庫區別開來的關鍵功能之一是它的可組合性。它提供了廣泛的圖表組件，可以組合起來創建復雜的可視化效果。無論您需要簡單的折線圖還是復雜的雷達圖，這個庫都能滿足您的需求。

為什么使用這個庫？

聲明性語法:

recharts 使用聲明性語法，可以輕松定義圖表的結構。通過以清晰簡潔的方式指定數據和配置選項，您可以使用最少的代碼創建復雜的圖表。

<responsivecontainer width="100%" height="{400}"><linechart data="{data}"><line type="monotone" datakey="value" stroke="#8884d8"></line><cartesiangrid stroke="#ccc"></cartesiangrid><xaxis datakey="name"></xaxis><yaxis></yaxis></linechart></responsivecontainer>

登錄后復制

可組合組件:

recharts 組件被設計為可組合的。這意味著您可以在同一可視化中組合多個組件，例如 、 和 。這種模塊化允許您輕松定制圖表以滿足您的特定要求。

響應式設計：

該庫提供了 組件，可以根據父容器的尺寸自動調整圖表的大小。這使得創建在任何設備或屏幕尺寸上看起來都很棒的圖表變得容易。

互動功能:

它還支持廣泛的交互功能，包括工具提示、圖例和縮放。這些功能使用戶可以輕松探索您的圖表并與之交互，從而增強整體用戶體驗。

定制選項:

recharts 提供了廣泛的自定義選項，允許您設置圖表的樣式以匹配您的品牌或應用程序的設計。您可以自定義從顏色和字體到軸標簽和網格線的所有內容。

重新圖表入門

要開始使用recharts，您需要使用npm 或yarn 安裝庫：

npm install recharts

登錄后復制

或者如果您使用的是紗線：

yarn add recharts

登錄后復制

安裝 recharts 后，您可以導入所需的組件并開始創建圖表。以下是如何使用 recharts 創建折線圖的簡單示例：

基本折線圖示例

在此示例中，我們創建一個簡單的折線圖，顯示一年中每個月的紫外線指數。我們使用 recharts 提供的 、、、、 和 組件來定義圖表的結構。

import react from "react";
import {
  linechart,
  line,
  cartesiangrid,
  xaxis,
  yaxis,
  tooltip,
} from "recharts";

const data = [
  { name: "jan", uv: 400 },
  { name: "feb", uv: 300 },
  { name: "mar", uv: 200 },
  { name: "apr", uv: 278 },
  { name: "may", uv: 189 },
  { name: "jun", uv: 239 },
  { name: "jul", uv: 349 },
  { name: "aug", uv: 200 },
];

const simplelinechart = () => (
  <linechart width="{600}" height="{300}" data="{data}"><line type="monotone" datakey="uv" stroke="#8884d8"></line><cartesiangrid stroke="#ccc"></cartesiangrid><xaxis datakey="name"></xaxis><yaxis></yaxis><tooltip></tooltip></linechart>
);

export default simplelinechart;

登錄后復制

讓我們看一下本例中使用的組件：

：折線圖的主要容器。它接受 width 和 height 屬性來定義圖表的尺寸。

：代表折線圖中的線。它接受 datakey 屬性來指定數據數組中包含要繪制的值的鍵。

：渲染圖表中的網格線。

：渲染圖表的x軸。它接受 datakey 屬性來指定包含 x 軸值的數據數組中的鍵。

：渲染圖表的y軸。

：當用戶將鼠標懸停在圖表上時顯示工具提示。

通過組合這些組件，您可以創建適合您特定需求的各種圖表。

定制您的圖表

recharts 提供了廣泛的自定義選項，允許您設置圖表的樣式以匹配您的應用程序的設計。您可以自定義圖表的顏色、字體、標簽和其他視覺元素，以創建具有凝聚力且具有視覺吸引力的用戶體驗。

const customlinechart = () => (
  <linechart width="{600}" height="{300}" data="{data}"><line type="monotone" datakey="uv" stroke="#82ca9d" strokewidth="{2}"></line><cartesiangrid stroke="#ccc" strokedasharray="5 5"></cartesiangrid><xaxis datakey="name"></xaxis><yaxis></yaxis><tooltip></tooltip><legend></legend>
  </linechart>
);

登錄后復制

向圖表添加多條線

recharts 只需添加額外的 組件即可輕松向圖表添加多條線。每個 組件可以代表不同的數據系列，允許您在同一可視化中比較多個數據集。

const multilinechart = () => (
  <linechart width="{600}" height="{300}" data="{data}"><line type="monotone" datakey="uv" stroke="#8884d8"></line><line type="monotone" datakey="pv" stroke="#82ca9d"></line><cartesiangrid stroke="#ccc"></cartesiangrid><xaxis datakey="name"></xaxis><yaxis></yaxis><tooltip></tooltip><legend></legend>
  </linechart>
);

登錄后復制

自定義軸和標簽

在某些情況下，您可能需要自定義軸以更好地適合您的數據。 recharts 允許在該領域進行廣泛的定制。

import react from "react";
import {
  linechart,
  line,
  xaxis,
  yaxis,
  cartesiangrid,
  tooltip,
  legend,
  responsivecontainer,
} from "recharts";

const data = [
  {
    name: "page a",
    uv: 4000,
    pv: 2400,
    amt: 2400,
  },
  {
    name: "page b",
    uv: 3000,
    pv: 1398,
    amt: 2210,
  },
  {
    name: "page c",
    uv: 2000,
    pv: 9800,
    amt: 2290,
  },
  {
    name: "page d",
    uv: 2780,
    pv: 3908,
    amt: 2000,
  },
  {
    name: "page e",
    uv: 1890,
    pv: 4800,
    amt: 2181,
  },
  {
    name: "page f",
    uv: 2390,
    pv: 3800,
    amt: 2500,
  },
  {
    name: "page g",
    uv: 3490,
    pv: 4300,
    amt: 2100,
  },
];

const customizedlabel = ({ x, y, stroke, value }) => {
  return (
    <text x="{x}" y="{y}" dy="{-4}" fill="{stroke}" fontsize="{10}" textanchor="middle">
      {value}
    </text>
  );
};

const customizedaxistick = ({ x, y, payload }) =&gt; {
  return (
    <g transform="{`translate(${x},${y})`}"><text x="{0}" y="{0}" dy="{16}" textanchor="end" fill="#666" transform="rotate(-35)">
        {payload.value}
      </text></g>
  );
};

const example = () =&gt; {
  return (
    <responsivecontainer width="100%" height="100%"><linechart width="{500}" height="{300}" data="{data}" margin="{{" top: right: left: bottom:><cartesiangrid strokedasharray="3 3"></cartesiangrid><xaxis datakey="name" height="{60}" tick="{&lt;customizedaxistick"></xaxis>} /&gt;
        <yaxis></yaxis><tooltip></tooltip><legend></legend>
        <line type="monotone" datakey="pv" stroke="#8884d8" label="{&lt;customizedlabel"></line>}
        /&gt;
        <line type="monotone" datakey="uv" stroke="#82ca9d"></line></linechart></responsivecontainer>
  );
};

export default example;

登錄后復制

讓我們分解一下此示例中所做的自定義：

線數據點上的自定義標簽

創建自定義標簽（customizedlabel），用于在折線圖上顯示數據點。
customizedlabel 組件是一個功能組件，它返回位于每個數據點坐標 (x, y) 處的文本元素，偏移量 (dy) 為 -4。
fill 屬性設置為從父級傳遞過來的描邊顏色，textanchor 設置為“middle”以進行對齊。

const customizedlabel = ({ x, y, stroke, value }) => {
  return (
    <text x="{x}" y="{y}" dy="{-4}" fill="{stroke}" fontsize="{10}" textanchor="middle">
      {value}
    </text>
  );
};

登錄后復制

自定義軸刻度

為 x 軸標簽創建自定義刻度 (customizedaxistick)。
customizedaxistick 組件是一個函數組件，它返回一個包含文本元素的 g 元素（組）。
標簽旋轉 -35 度以獲得更好的可見性并與軸對齊。

const customizedaxistick = ({ x, y, payload }) => {
  return (
    <g transform="{`translate(${x},${y})`}"><text x="{0}" y="{0}" dy="{16}" textanchor="end" fill="#666" transform="rotate(-35)">
        {payload.value}
      </text></g>
  );
};

登錄后復制

折線圖設置

linechart 組件用于創建圖表，responsivecontainer 確保其具有響應性。
data 屬性被分配包含數據點的靜態數組。

const example = () => {
  return (
    <responsivecontainer width="100%" height="100%"><linechart width="{500}" height="{300}" data="{data}" margin="{{" top: right: left: bottom:><cartesiangrid strokedasharray="3 3"></cartesiangrid><xaxis datakey="name" height="{60}" tick="{&lt;customizedaxistick"></xaxis>} /&gt;
        <yaxis></yaxis><tooltip></tooltip><legend></legend>
        <line type="monotone" datakey="pv" stroke="#8884d8" label="{&lt;customizedlabel"></line>}
        /&gt;
        <line type="monotone" datakey="uv" stroke="#82ca9d"></line></linechart></responsivecontainer>
  );
};

登錄后復制

cartesiangrid 添加網格以提高可讀性。

xaxis 利用 customizedaxistick 進行自定義刻度格式。

yaxis 是一個簡單的垂直軸。

包含工具提示和圖例以提供交互元素和圖例信息。

line用于繪制不同描邊顏色的線條，label用于添加創建的自定義標簽。

自定義工具提示

與自定義標簽類似，您還可以創建自定義工具提示，以在用戶與圖表交互時顯示附加信息。自定義工具提示可用于提供有關所顯示數據點的更多上下文或詳細信息。

const CustomTooltip = ({ active, payload, label }) => {
  if (active && payload && payload.length) {
    return (
      <div classname="custom-tooltip">
        <p classname="label">{`${label} : ${payload[0].value}`}</p>
      </div>
    );
  }

  return null;
};

const CustomTooltipChart = () =&gt; (
  <linechart width="{600}" height="{300}" data="{data}"><line type="monotone" datakey="uv" stroke="#8884d8"></line><cartesiangrid stroke="#ccc"></cartesiangrid><xaxis datakey="name"></xaxis><yaxis></yaxis><tooltip content="{&lt;CustomTooltip"></tooltip>} /&gt;
    <legend></legend>
  </linechart>
);

登錄后復制

結論

recharts 是一個強大而靈活的圖表庫，可以幫助您在 react 應用程序中創建令人驚嘆的數據可視化效果。通過利用 recharts 組件的可組合性質，您可以輕松地以最少的努力構建復雜的交互式圖表。無論您需要簡單的折線圖還是更高級的雷達圖，recharts 都能提供讓您的數據栩栩如生的工具。

您可以通過訪問官方 recharts 文檔來探索全系列的 recharts 組件和自定義選項。