Chart.js 混合图

作者likuolei

在 React 项目中使用 Chart.js 创建混合图（Mixed Chart）是一种强大的数据可视化方式，允许在一个图表中组合多种图表类型（如折线图、柱状图等），适合展示多维数据的关系或对比，如销量与增长率。本文以中文讲解 Chart.js 混合图的创建过程，结合 react-chartjs-2 库，涵盖基本用法、动态数据、样式定制、与 React Router 和 Tailwind CSS 的结合，以及注意事项，力求简洁清晰，避免重复之前的内容，并提供实用示例。

1. 混合图概述

混合图（Mixed Chart）允许在同一图表中显示多种图表类型，例如柱状图和折线图的组合。Chart.js 的混合图支持：

  • 多种图表类型：如 bar（柱状图）、line（折线图）、scatter（散点图）等。
  • 多数据集：每个数据集可指定不同图表类型。
  • 交互效果：支持悬停提示、点击事件。
  • 响应式：自动适配容器大小。
  • 高度可定制：调整颜色、轴、动画等。

在 React 中，使用 react-chartjs-2 的 <Chart /> 组件（通用组件）或特定组件（如 <Bar />、Line />）渲染混合图。

2. 基本混合图实现

以下是在 React 中使用 Chart.js 创建一个混合图的示例，结合柱状图（bar）和折线图（line）展示销量和增长率。

示例代码

import { Chart } from 'react-chartjs-2';
import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, LineElement, PointElement, Title, Tooltip, Legend } from 'chart.js';

// 注册必要模块
ChartJS.register(CategoryScale, LinearScale, BarElement, LineElement, PointElement, Title, Tooltip, Legend);

function MixedChart() {
  // 数据配置
  const data = {
    labels: ['一月', '二月', '三月', '四月', '五月'],
    datasets: [
      {
        type: 'bar', // 柱状图
        label: '销量 (单位)',
        data: [65, 59, 80, 81, 56],
        backgroundColor: 'rgba(59, 130, 246, 0.5)',
        borderColor: 'rgba(59, 130, 246, 1)',
        borderWidth: 1,
        yAxisID: 'y', // 绑定到左 Y 轴
      },
      {
        type: 'line', // 折线图
        label: '增长率 (%)',
        data: [5, 10, 8, 12, 7],
        borderColor: '#ff6384',
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        fill: true,
        tension: 0.4,
        yAxisID: 'y1', // 绑定到右 Y 轴
      },
    ],
  };

  // 选项配置
  const options = {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
      },
      tooltip: {
        callbacks: {
          label: (context) => {
            const label = context.dataset.label || '';
            const value = context.raw;
            return `${label}: ${value}${context.dataset.type === 'line' ? '%' : ''}`;
          },
        },
      },
      title: {
        display: true,
        text: '2025 年销量与增长率',
        font: { size: 16 },
      },
    },
    scales: {
      x: {
        title: { display: true, text: '月份' },
        grid: { display: false },
      },
      y: {
        title: { display: true, text: '销量 (单位)' },
        beginAtZero: true,
        grid: { color: '#e5e7eb' },
      },
      y1: {
        title: { display: true, text: '增长率 (%)' },
        position: 'right', // 右 Y 轴
        beginAtZero: true,
        grid: { display: false }, // 避免网格重叠
      },
    },
  };

  return (
    <div className="w-full max-w-3xl mx-auto p-6 bg-white rounded-lg shadow-md">
      <Chart type="bar" data={data} options={options} />
    </div>
  );
}

export default MixedChart;

说明

  • 注册模块：
  • BarElement、LineElement、PointElement：支持柱状图和折线图。
  • CategoryScale、LinearScale：X/Y 轴刻度。
  • Tooltip、Legend：交互和图例支持。
  • 数据（data）：
  • type：每个 dataset 指定图表类型（bar 或 line）。
  • yAxisID：绑定数据集到不同 Y 轴（y 或 y1）。
  • labels：X 轴标签（如月份）。
  • 选项（options）：
  • scales：定义多个 Y 轴（y 和 y1），分别对应销量和增长率。
  • tooltip.callbacks.label：自定义提示框，区分单位。
  • responsive: true：适配容器大小。
  • 组件：使用通用 <Chart type="bar" /> 组件（也可使用 <Bar /> 作为基础）。
  • 容器：使用 Tailwind CSS 类美化容器。

3. 多类型混合图

混合图支持更多类型组合，如柱状图、折线图和散点图。

示例：柱状图 + 折线图 + 散点图

function MultiMixedChart() {
  const data = {
    labels: ['一月', '二月', '三月', '四月'],
    datasets: [
      {
        type: 'bar',
        label: '销量',
        data: [50, 45, 60, 55],
        backgroundColor: 'rgba(59, 130, 246, 0.5)',
        yAxisID: 'y',
      },
      {
        type: 'line',
        label: '增长率',
        data: [5, 10, 8, 12],
        borderColor: '#ff6384',
        fill: false,
        yAxisID: 'y1',
      },
      {
        type: 'scatter',
        label: '关键点',
        data: [{ x: '二月', y: 50 }, { x: '四月', y: 60 }],
        backgroundColor: '#36a2eb',
        pointRadius: 8,
        yAxisID: 'y',
      },
    ],
  };

  const options = {
    responsive: true,
    plugins: {
      legend: { position: 'top' },
      title: { display: true, text: '销量与关键点分析' },
    },
    scales: {
      x: { title: { display: true, text: '月份' } },
      y: { title: { display: true, text: '销量 (单位)' }, beginAtZero: true },
      y1: { title: { display: true, text: '增长率 (%)' }, position: 'right', beginAtZero: true },
    },
  };

  return (
    <div className="w-full max-w-3xl mx-auto p-6 bg-white rounded-lg shadow-md">
      <Chart type="bar" data={data} options={options} />
    </div>
  );
}

说明

  • 多种类型：结合 bar（柱状图）、line（折线图）、scatter（散点图）。
  • 散点图：数据点使用 { x, y } 格式，需确保 x 对应 labels。
  • 多 Y 轴：不同数据集绑定不同 Y 轴（y 和 y1）。

4. 动态数据更新

结合 React 的 useState 和 useEffect Hooks，实现混合图的动态更新。

示例：动态混合图

import { useState, useEffect } from 'react';
import { Chart } from 'react-chartjs-2';
import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, LineElement, PointElement, Tooltip } from 'chart.js';

ChartJS.register(CategoryScale, LinearScale, BarElement, LineElement, PointElement, Tooltip);

function DynamicMixedChart() {
  const [data, setData] = useState({
    labels: ['10:00', '10:01', '10:02'],
    datasets: [
      {
        type: 'bar',
        label: '流量',
        data: [100, 120, 110],
        backgroundColor: 'rgba(34, 197, 94, 0.5)',
        yAxisID: 'y',
      },
      {
        type: 'line',
        label: '速率',
        data: [5, 6, 5.5],
        borderColor: '#ff9f40',
        fill: false,
        yAxisID: 'y1',
      },
    ],
  });

  useEffect(() => {
    const interval = setInterval(() => {
      setData(prev => {
        const newLabel = new Date().toLocaleTimeString();
        const newBarData = [...prev.datasets[0].data, Math.floor(Math.random() * 100) + 50].slice(-10);
        const newLineData = [...prev.datasets[1].data, Math.random() * 10].slice(-10);
        return {
          ...prev,
          labels: [...prev.labels, newLabel].slice(-10),
          datasets: [
            { ...prev.datasets[0], data: newBarData },
            { ...prev.datasets[1], data: newLineData },
          ],
        };
      });
    }, 3000); // 每 3 秒更新
    return () => clearInterval(interval);
  }, []);

  const options = {
    responsive: true,
    plugins: { title: { display: true, text: '实时流量与速率' } },
    scales: {
      y: { min: 0, title: { display: true, text: '流量 (单位)' } },
      y1: { min: 0, position: 'right', title: { display: true, text: '速率 (%)' } },
    },
  };

  return (
    <div className="w-full max-w-3xl mx-auto p-6 bg-white rounded-lg shadow-md">
      <Chart type="bar" data={data} options={options} />
    </div>
  );
}

说明

  • 动态更新：useEffect 每 3 秒更新柱状图和折线图数据，保留最近 10 个点。
  • 性能优化：可用 useMemo 缓存 data：
  const memoizedData = useMemo(() => data, [data]);

5. 与 React Router 结合

将混合图嵌入 React Router 页面，适合数据仪表盘。

示例

import { Routes, Route, NavLink } from 'react-router-dom';
import MixedChart from './MixedChart';
import MultiMixedChart from './MultiMixedChart';

function App() {
  return (
    <div className="p-6">
      <nav className="mb-6 space-x-4">
        <NavLink
          to="/mixed"
          className={({ isActive }) =>
            isActive ? 'text-blue-500 font-bold' : 'text-gray-500'
          }
        >
          标准混合图
        </NavLink>
        <NavLink
          to="/multi-mixed"
          className={({ isActive }) =>
            isActive ? 'text-blue-500 font-bold' : 'text-gray-500'
          }
        >
          多类型混合图
        </NavLink>
      </nav>
      <Routes>
        <Route path="/mixed" element={<MixedChart />} />
        <Route path="/multi-mixed" element={<MultiMixedChart />} />
      </Routes>
    </div>
  );
}

说明

  • NavLink：切换不同混合图页面，动态添加激活样式。
  • Routes：映射混合图组件到路由路径。

6. 与 Tailwind CSS 结合

混合图渲染在 Canvas 上，外部容器可用 Tailwind CSS 美化。

示例

function MixedChart() {
  const data = { /* 同上 */ };
  const options = { /* 同上 */ };

  return (
    <div className="bg-white p-6 rounded-lg shadow-md max-w-3xl mx-auto">
      <h2 className="text-xl font-semibold mb-4 text-center">销量与增长率分析</h2>
      <Chart type="bar" data={data} options={options} />
    </div>
  );
}

说明

  • 容器样式：Tailwind 类（如 bg-white、rounded-lg）美化容器。
  • Canvas 样式：混合图内部样式由 data 和 options 控制。

7. 自定义混合图样式

通过 options 和 data 自定义混合图的外观。

示例：自定义样式

const options = {
  responsive: true,
  plugins: {
    legend: { position: 'bottom', labels: { font: { size: 12 } } },
    tooltip: {
      backgroundColor: '#111827',
      callbacks: {
        label: (context) => {
          const label = context.dataset.label || '';
          const value = context.raw;
          return `${label}: ${value}${context.dataset.type === 'line' ? '%' : ''}`;
        },
      },
    },
    title: { display: true, text: '自定义混合图', font: { size: 16 } },
  },
  scales: {
    x: { grid: { display: false }, title: { display: true, text: '时间' } },
    y: {
      beginAtZero: true,
      grid: { color: '#e5e7eb' },
      title: { display: true, text: '销量 (单位)' },
    },
    y1: {
      position: 'right',
      beginAtZero: true,
      grid: { display: false },
      title: { display: true, text: '增长率 (%)' },
    },
  },
  elements: {
    bar: { borderRadius: 4 }, // 柱状图圆角
    line: { tension: 0.3, borderWidth: 2 }, // 折线平滑度和粗细
    point: { radius: 5, hoverRadius: 8 }, // 数据点样式
  },
};

说明

  • 柱状图样式：elements.bar.borderRadius 设置柱子圆角。
  • 折线样式：elements.line.tension 控制平滑度，borderWidth 设置线条粗细。
  • 多 Y 轴：yAxisID 绑定数据集到不同 Y 轴，避免单位混淆。
  • Tooltip：自定义提示框，区分柱状图和折线图单位。

8. 注意事项

  1. 模块注册：
  • 确保注册所有图表类型模块（如 BarElement、LineElement），否则报错（如“Bar is not a registered element”）。
  1. 数据格式：
  • labels 和 datasets.data 长度必须一致。
  • 散点图数据使用 { x, y } 格式，需匹配 labels。
  1. 性能优化：
  • 使用 useMemo 缓存 data 和 options：
    jsx const memoizedData = useMemo(() => data, [data]);
  • 动态更新时限制数据点数量（如 slice(-10)）。
  1. 多 Y 轴：
  • 使用 yAxisID 绑定数据集到不同 Y 轴。
  • 设置 scales.y1.position: 'right' 创建右 Y 轴。
  1. 容器尺寸：
  • 确保容器有足够宽高，可通过 CSS 或 options 设置：
    jsx options: { maintainAspectRatio: false, height: 400 }
  1. 调试：
  • 检查浏览器开发者工具，确保 Canvas 渲染正常。
  • 验证 data 和 options 格式，排除配置错误。

9. 资源

  • Chart.js 混合图文档：https://www.chartjs.org/docs/latest/charts/mixed.html
  • react-chartjs-2 示例：https://react-chartjs-2.js.org/examples
  • 中文社区：搜索“Chart.js 混合图 中文教程”或参考掘金、知乎。

如果需要更详细的讲解（如复杂混合图配置、插件集成或交互优化），请告诉我！

类似文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注