首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

水平堆叠条形图(ReactJS)

在ReactJS中创建一个水平堆叠条形图,你可以使用一些流行的库,如rechartsvictory。这里我将展示如何使用recharts库来创建一个水平堆叠条形图。

首先,你需要安装recharts库:

代码语言:javascript
复制
npm install recharts

然后,你可以创建一个组件来渲染水平堆叠条形图。以下是一个简单的例子:

代码语言:javascript
复制
import React from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } 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 HorizontalStackedBarChart = () => {
  return (
    <BarChart width={600} height={300} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Bar dataKey="uv" stackId="a" fill="#8884d8" />
      <Bar dataKey="pv" stackId="a" fill="#82ca9d" />
      <Bar dataKey="amt" stackId="a" fill="#ffc658" />
    </BarChart>
  );
};

export default HorizontalStackedBarChart;

在这个例子中,data数组包含了每个条形图的数据,每个条目都有name(类别),uv(独立访客数),pv(页面浏览量)和amt(金额)。BarChart组件用于创建条形图,Bar组件用于定义每个条形图的属性,如dataKey(数据键)和fill(填充颜色)。

stackId属性用于将多个Bar组件堆叠在一起。在这个例子中,所有的Bar组件都有相同的stackId("a"),这意味着它们将在同一类别下堆叠。

你可以根据需要调整widthheight属性来改变图表的大小。

最后,你可以在你的应用中使用这个组件:

代码语言:javascript
复制
import React from 'react';
import HorizontalStackedBarChart from './HorizontalStackedBarChart';

const App = () => {
  return (
    <div>
      <HorizontalStackedBarChart />
    </div>
  );
};

export default App;

这样,你就创建了一个简单的水平堆叠条形图。你可以根据需要进一步自定义图表,例如添加更多的数据系列或调整样式。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的视频

领券