Ant Design Charts基于 AntV 实现的 React 可视化图表库

AntV React简介

图表使用

  • 快速上手

  • 基础概念概览

    • 比如:在概览中的axis节点

      • 在这里可以找到labelFormatter修改纵坐标轴数值显示格式
      js 复制代码
       axis:{
          y:{
            // 纵坐标轴修改显示数值格式化
            labelFormatter:(value)=>`$ ${value}`
          }
        }
  • 图表示例

  • 折线图示例

    • 左侧折线图示例:基础折线图,缩略轴等不同的基础配置图表
    • 右侧编辑区域点击展开api配置选项
折线图示例
js 复制代码
import { Line } from '@ant-design/plots';
import React from 'react';
import ReactDOM from 'react-dom';

const DemoLine = () => {
  const data = [
    { year: '1991', value: 3 },
    { year: '1992', value: 4 },
    { year: '1993', value: 3.5 },
    { year: '1994', value: 5 },
    { year: '1995', value: 4.9 },
    { year: '1996', value: 6 },
    { year: '1997', value: 7 },
    { year: '1998', value: 9 },
    { year: '1999', value: 13 },
  ];
  const config = {
    data,
    xField: 'year',
    yField: 'value',
    point: {
      shapeField: 'square',
      sizeField: 4,
    },
    style: {
      lineWidth: 2,
    },
    axis: {
      y: {
        // 纵坐标轴修改显示数值格式化
        labelFormatter: (value) => `$ ${value}`
      }
    },
    // 缩略轴
    slider: {
      x: {}
    },
    interaction: {
      tooltip: {
        marker: false,
        //十字准星线
        crosshairs: true,
        // 横轴准星线-X轴
        crosshairsXStroke: "red",
        crosshairsXLineWidth: 33,
        // 纵轴准星线-Y轴
        crosshairsYStroke: "blue",
        crosshairsYLineDash: 4,
      },
    },
    // scrollbar: {
    //   // 横向滚动条
    //   x: {}
    // }
  };
  return <Line {...config} />;
};

ReactDOM.render(<DemoLine />, document.getElementById('container'))
相关推荐
SUPER52662 小时前
FastApi项目启动失败 got an unexpected keyword argument ‘loop_factory‘
java·服务器·前端
sanx182 小时前
专业电竞体育数据与系统解决方案
前端·数据库·apache·数据库开发·时序数据库
你的人类朋友5 小时前
【Node】认识一下Node.js 中的 VM 模块
前端·后端·node.js
Cosolar5 小时前
FunASR 前端语音识别代码解析
前端·面试·github
@大迁世界7 小时前
Vue 设计模式 实战指南
前端·javascript·vue.js·设计模式·ecmascript
芭拉拉小魔仙7 小时前
Vue项目中如何实现表格选中数据的 Excel 导出
前端·vue.js·excel
jump_jump8 小时前
妙用 localeCompare 获取汉字拼音首字母
前端·javascript·浏览器
U.2 SSD8 小时前
Echarts单轴坐标系散点图
前端·javascript·echarts
德育处主任Pro8 小时前
前端玩转大模型,DeepSeek-R1 蒸馏 Llama 模型的 Bedrock 部署
前端·llama
Jedi Hongbin8 小时前
Three.js NodeMaterial 节点材质系统文档
前端·javascript·three.js·nodematerial