24 小时堆叠条形图：用 JavaScript/React 绘制引人注目的数据可视化

javascript

2024-03-05 21:21:01

使用 JavaScript/React 构建令人印象深刻的 24 小时堆叠条形图

介绍

在数据可视化的世界中，条形图是不可或缺的工具。对于展示随着时间的推移而变化的数据来说，堆叠条形图是一个特别强大的选择。本文将引导您使用 JavaScript/React 构建一个引人注目的 24 小时堆叠条形图。

步骤 1：准备数据

首先，您需要准备数据，其中包含以下信息：

时间范围： 00:00 至 24:00 的 24 小时间隔
值：每个时间范围内需要绘制的两个值
持续时间： 每个值的持续时间

步骤 2：构建图表

使用 JavaScript/React 库，例如 Recharts，来构建图表。这是设置所需的关键元素：

图表类型：堆叠条形图
数据源：您的数据
坐标轴：显示时间范围和值

步骤 3：绘制条形

根据您的数据绘制堆叠条形。条形的长度应对应于每个值的持续时间，而高度应表示值的总和。确保条形在时间轴上并排放置。

步骤 4：添加标签

清晰的标签对于让您的图表易于理解至关重要。为每个条形添加标签，说明时间范围和所代表的值。

步骤 5：自定义外观

根据您的喜好自定义条形和标签的外观。调整颜色、大小和字体，以创建符合您的品牌或主题的可视化效果。

示例代码

以下示例代码展示了如何使用 Recharts 库创建堆叠条形图：

import { BarChart, Bar, XAxis, YAxis, Tooltip } from 'recharts';

const data = [
  {
    hour: '00:00-01:30',
    on: 1.5,
    off: 0,
  },
  {
    hour: '01:30-03:40',
    on: 0,
    off: 2.1,
  },
  {
    hour: '03:40-05:20',
    on: 1.8,
    off: 0,
  },
];

const StackedBarChart = () => {
  return (
    <BarChart
      width={500}
      height={300}
      data={data}
      margin={{
        top: 20,
        right: 30,
        left: 20,
        bottom: 5,
      }}
    >
      <XAxis dataKey="hour" />
      <YAxis />
      <Tooltip />
      <Bar stackId="a" dataKey="on" fill="#8884d8" />
      <Bar stackId="a" dataKey="off" fill="#82ca9d" />
    </BarChart>
  );
};

export default StackedBarChart;