React Hooks + AntV(G2/G2Plot) ----------- 多种实现分组柱状图的方法（包括Ant Design Charts）

最新推荐文章于 2023-05-15 15:34:02 发布
最新推荐文章于 2023-05-15 15:34:02 发布
阅读量5.5k 收藏 6
点赞数 6
分类专栏： react hook AntV 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48718857/article/details/112801027
版权

一、AntV的g2plot分组柱状图

优点：用处更广泛，用法更简单
缺点：tiptop以一组的形式展示（不影响使用）

效果图：

在这里插入图片描述

数据:

数据源格式为一个数组对象

const data = [
  {
    name: 'London',
    月份: 'Jan.',
    月均降雨量: 18.9,
  },
  {
    name: 'London',
    月份: 'Feb.',
    月均降雨量: 28.8,
  },
  {
    name: 'London',
    月份: 'Mar.',
    月均降雨量: 39.3,
  },
  {
    name: 'London',
    月份: 'Apr.',
    月均降雨量: 81.4,
  },
  {
    name: 'London',
    月份: 'May',
    月均降雨量: 47,
  },
  {
    name: 'London',
    月份: 'Jun.',
    月均降雨量: 20.3,
  },
  {
    name: 'London',
    月份: 'Jul.',
    月均降雨量: 24,
  },
  {
    name: 'London',
    月份: 'Aug.',
    月均降雨量: 35.6,
  },
  {
    name: 'Berlin',
    月份: 'Jan.',
    月均降雨量: 12.4,
  },
  {
    name: 'Berlin',
    月份: 'Feb.',
    月均降雨量: 23.2,
  },
  {
    name: 'Berlin',
    月份: 'Mar.',
    月均降雨量: 34.5,
  },
  {
    name: 'Berlin',
    月份: 'Apr.',
    月均降雨量: 99.7,
  },
  {
    name: 'Berlin',
    月份: 'May',
    月均降雨量: 52.6,
  },
  {
    name: 'Berlin',
    月份: 'Jun.',
    月均降雨量: 35.5,
  },
  {
    name: 'Berlin',
    月份: 'Jul.',
    月均降雨量: 37.4,
  },
  {
    name: 'Berlin',
    月份: 'Aug.',
    月均降雨量: 42.4,
  },
];

实现代码：

官方版：

优点：api很全面
缺点：用法不太友好，得进一步封装才能使用

import { Column } from '@antv/g2plot';

const data = [
  {
    name: 'London',
    月份: 'Jan.',
    月均降雨量: 18.9,
  },
  {
    name: 'London',
    月份: 'Feb.',
    月均降雨量: 28.8,
  },
  {
    name: 'London',
    月份: 'Mar.',
    月均降雨量: 39.3,
  },
  {
    name: 'London',
    月份: 'Apr.',
    月均降雨量: 81.4,
  },
  {
    name: 'London',
    月份: 'May',
    月均降雨量: 47,
  },
  {
    name: 'London',
    月份: 'Jun.',
    月均降雨量: 20.3,
  },
  {
    name: 'London',
    月份: 'Jul.',
    月均降雨量: 24,
  },
  {
    name: 'London',
    月份: 'Aug.',
    月均降雨量: 35.6,
  },
  {
    name: 'Berlin',
    月份: 'Jan.',
    月均降雨量: 12.4,
  },
  {
    name: 'Berlin',
    月份: 'Feb.',
    月均降雨量: 23.2,
  },
  {
    name: 'Berlin',
    月份: 'Mar.',
    月均降雨量: 34.5,
  },
  {
    name: 'Berlin',
    月份: 'Apr.',
    月均降雨量: 99.7,
  },
  {
    name: 'Berlin',
    月份: 'May',
    月均降雨量: 52.6,
  },
  {
    name: 'Berlin',
    月份: 'Jun.',
    月均降雨量: 35.5,
  },
  {
    name: 'Berlin',
    月份: 'Jul.',
    月均降雨量: 37.4,
  },
  {
    name: 'Berlin',
    月份: 'Aug.',
    月均降雨量: 42.4,
  },
];

const stackedColumnPlot = new Column('container', {
  data,
  isGroup: true,
  xField: '月份',
  yField: '月均降雨量',
  seriesField: 'name',
  /** 设置颜色 */
  //color: ['#1ca9e6', '#f88c24'],
  /** 设置间距 */
  // marginRatio: 0.1,
  label: {
    // 可手动配置 label 数据标签位置
    position: 'middle', // 'top', 'middle', 'bottom'
    // 可配置附加的布局方法
    layout: [
      // 柱形图数据标签位置自动调整
      { type: 'interval-adjust-position' },
      // 数据标签防遮挡
      { type: 'interval-hide-overlap' },
      // 数据标签文颜色自动调整
      { type: 'adjust-color' },
    ],
  },
});

stackedColumnPlot.render();
React Hooks版：

优点：适用性强，hooks开发最爱
缺点：需要一定的改变和封装
注意：此方式需要容器装图表，且容器id与图表配置时一致，如下方的container

import { Column } from '@antv/g2plot';
import React, { useEffect, useState } from "react";
const data = [
  {
    name: 'London',
    月份: 'Jan.',
    月均降雨量: 18.9,
  },
  {
    name: 'London',
    月份: 'Feb.',
    月均降雨量: 28.8,
  },
  {
    name: 'London',
    月份: 'Mar.',
    月均降雨量: 39.3,
  },
  {
    name: 'London',
    月份: 'Apr.',
    月均降雨量: 81.4,
  },
  {
    name: 'London',
    月份: 'May',
    月均降雨量: 47,
  },
  {
    name: 'London',
    月份: 'Jun.',
    月均降雨量: 20.3,
  },
  {
    name: 'London',
    月份: 'Jul.',
    月均降雨量: 24,
  },
  {
    name: 'London',
    月份: 'Aug.',
    月均降雨量: 35.6,
  },
  {
    name: 'Berlin',
    月份: 'Jan.',
    月均降雨量: 12.4,
  },
  {
    name: 'Berlin',
    月份: 'Feb.',
    月均降雨量: 23.2,
  },
  {
    name: 'Berlin',
    月份: 'Mar.',
    月均降雨量: 34.5,
  },
  {
    name: 'Berlin',
    月份: 'Apr.',
    月均降雨量: 99.7,
  },
  {
    name: 'Berlin',
    月份: 'May',
    月均降雨量: 52.6,
  },
  {
    name: 'Berlin',
    月份: 'Jun.',
    月均降雨量: 35.5,
  },
  {
    name: 'Berlin',
    月份: 'Jul.',
    月均降雨量: 37.4,
  },
  {
    name: 'Berlin',
    月份: 'Aug.',
    月均降雨量: 42.4,
  },
];
const CompareChartsDemo = () => {
  useEffect(() => {
	const stackedColumnPlot = new Column('container', {
	  data,
	  isGroup: true,
	  xField: '月份',
	  yField: '月均降雨量',
	  seriesField: 'name',
	  /** 设置颜色 */
	  //color: ['#1ca9e6', '#f88c24'],
	  /** 设置间距 */
	  // marginRatio: 0.1,
	  label: {
	    // 可手动配置 label 数据标签位置
	    position: 'middle', // 'top', 'middle', 'bottom'
	    // 可配置附加的布局方法
	    layout: [
	      // 柱形图数据标签位置自动调整
	      { type: 'interval-adjust-position' },
	      // 数据标签防遮挡
	      { type: 'interval-hide-overlap' },
	      // 数据标签文颜色自动调整
	      { type: 'adjust-color' },
	    ],
	  },
	});
	stackedColumnPlot.render(); 
	}, []);
  return <div id="container"></div>
};
export default CompareChartsDemo ;
Ant Design Charts版：

优点：封装成了组件，用法更简单便捷，
缺点：更多属性设置还得看g2plot的api

	import React, { useState, useEffect } from 'react';
	import { Column } from '@ant-design/charts';
	
	const DemoColumn: React.FC = () => {
	  
	
	var data = [
	    {
	        name: 'London',
	        月份: 'Jan.',
	        月均降雨量: 18.9
	    },
	    {
	        name: 'London',
	        月份: 'Feb.',
	        月均降雨量: 28.8
	    },
	    {
	        name: 'London',
	        月份: 'Mar.',
	        月均降雨量: 39.3
	    },
	    {
	        name: 'London',
	        月份: 'Apr.',
	        月均降雨量: 81.4
	    },
	    {
	        name: 'London',
	        月份: 'May',
	        月均降雨量: 47
	    },
	    {
	        name: 'London',
	        月份: 'Jun.',
	        月均降雨量: 20.3
	    },
	    {
	        name: 'London',
	        月份: 'Jul.',
	        月均降雨量: 24
	    },
	    {
	        name: 'London',
	        月份: 'Aug.',
	        月均降雨量: 35.6
	    },
	    {
	        name: 'Berlin',
	        月份: 'Jan.',
	        月均降雨量: 12.4
	    },
	    {
	        name: 'Berlin',
	        月份: 'Feb.',
	        月均降雨量: 23.2
	    },
	    {
	        name: 'Berlin',
	        月份: 'Mar.',
	        月均降雨量: 34.5
	    },
	    {
	        name: 'Berlin',
	        月份: 'Apr.',
	        月均降雨量: 99.7
	    },
	    {
	        name: 'Berlin',
	        月份: 'May',
	        月均降雨量: 52.6
	    },
	    {
	        name: 'Berlin',
	        月份: 'Jun.',
	        月均降雨量: 35.5
	    },
	    {
	        name: 'Berlin',
	        月份: 'Jul.',
	        月均降雨量: 37.4
	    },
	    {
	        name: 'Berlin',
	        月份: 'Aug.',
	        月均降雨量: 42.4
	    }
	];
	var config = {
	    data: data,
	    isGroup: true,
	    xField: '月份',
	    yField: '月均降雨量',
	    seriesField: 'name',
	    label: {
	        position: 'middle',
	        layout: [
	            { type: 'interval-adjust-position' },
	            { type: 'interval-hide-overlap' },
	            { type: 'adjust-color' }
	        ]
	    }
	};
	  return <Column {...config} />;
	};
	
	export default DemoColumn;

``

Ant Design Charts官方Api: https://charts.ant.design/demos/column/
AntV g2plot官方: https://g2plot.antv.vision/zh/examples/column/grouped

二、AntV的g2plot的多图层图表

优点：tiptop一组是分开的（不需要这个效果用上面的就行）
缺点：api缺乏，自行琢磨属性在这里插入图片描述

效果图:

在这里插入图片描述

数据:

数据源格式可变化，只要你能渲染出来
分组也可动态化（例子中male/female是死数据）

实现代码：

官方版：
import { DataView } from '@antv/data-set';
import { Lab } from '@antv/g2plot';

const yearData = [
  ['2010', 60, 176, 35, 25],
  ['2011', 51, 136, 25, 26],
  ['2012', 73, 196, 35, 38],
  ['2013', 84, 315, 43, 41],
  ['2014', 79, 203, 36, 33],
  ['2015', 89, 286, 41, 48],
];

const labChart = new Lab.MultiView('container', {
  height: 500,
  padding: 'auto',
  tooltip: { showMarkers: false },
  views: [
    {
      data: new DataView()
        .source(yearData.map((d) => ({ year: d[0], male: d[3], female: d[4] })))
        .transform({ type: 'fold', fields: ['male', 'female'], key: 'gender', value: 'turnout' }).rows,
      axes: {
        year: {
          title: { text: 'Turnout by gender' },
        },
      },
      geometries: [
        {
          type: 'interval',
          xField: 'year',
          yField: 'turnout',
          colorField: 'gender',
          adjust: { type: 'dodge', marginRatio: 0 },
          mapping: {},
        },
      ],
    },
  ],
});

labChart.render();
React Hooks版：
import { DataView } from '@antv/data-set';
import { Lab } from '@antv/g2plot';
import React, { useEffect, useState } from "react";

const CompareChartsDemo = () => {
  useEffect(() => {
	const yearData = [
  ['2010', 60, 176, 35, 25],
  ['2011', 51, 136, 25, 26],
  ['2012', 73, 196, 35, 38],
  ['2013', 84, 315, 43, 41],
  ['2014', 79, 203, 36, 33],
  ['2015', 89, 286, 41, 48],
];

const labChart = new Lab.MultiView('container', {
  height: 500,
  padding: 'auto',
  tooltip: { showMarkers: false },
  views: [
    {
      data: new DataView()
        .source(yearData.map((d) => ({ year: d[0], male: d[3], female: d[4] })))
        .transform({ type: 'fold', fields: ['male', 'female'], key: 'gender', value: 'turnout' }).rows,
      axes: {
        year: {
          title: { text: 'Turnout by gender' },
        },
      },
      geometries: [
        {
          type: 'interval',
          xField: 'year',
          yField: 'turnout',
          colorField: 'gender',
          adjust: { type: 'dodge', marginRatio: 0 },
          mapping: {},
        },
      ],
    },
  ],
});

labChart.render();
	}, []);
  return <div id="container"></div>
};
export default CompareChartsDemo ;

AntV g2plot多图层图表官方:https://g2plot.antv.vision/zh/examples/case/multi-view#drinks

三、AntV的g2的分组柱状图图例项高亮

效果图：

在这里插入图片描述

数据：

const data = [
  { company: 'Apple', type: '整体', value: 30 },
  { company: 'Facebook', type: '整体', value: 35 },
  { company: 'Google', type: '整体', value: 28 },
  { company: 'Apple', type: '非技术岗', value: 40 },
  { company: 'Facebook', type: '非技术岗', value: 65 },
  { company: 'Google', type: '非技术岗', value: 47 },
  { company: 'Apple', type: '技术岗', value: 23 },
  { company: 'Facebook', type: '技术岗', value: 18 },
  { company: 'Google', type: '技术岗', value: 20 },
  { company: 'Apple', type: '技术岗', value: 35 },
  { company: 'Facebook', type: '技术岗', value: 30 },
  { company: 'Google', type: '技术岗', value: 25 }
];

实现代码：

官方版：
import { Chart } from '@antv/g2';

// 默认已经加载 legend-active 交互
const data = [
  { company: 'Apple', type: '整体', value: 30 },
  { company: 'Facebook', type: '整体', value: 35 },
  { company: 'Google', type: '整体', value: 28 },
  { company: 'Apple', type: '非技术岗', value: 40 },
  { company: 'Facebook', type: '非技术岗', value: 65 },
  { company: 'Google', type: '非技术岗', value: 47 },
  { company: 'Apple', type: '技术岗', value: 23 },
  { company: 'Facebook', type: '技术岗', value: 18 },
  { company: 'Google', type: '技术岗', value: 20 },
  { company: 'Apple', type: '技术岗', value: 35 },
  { company: 'Facebook', type: '技术岗', value: 30 },
  { company: 'Google', type: '技术岗', value: 25 }
];

const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 500,
});

chart.data(data);

chart.scale('value', { nice: true, });

chart.legend({
  position: 'top'
});

chart
  .interval()
  .position('type*value').color('company')
  .adjust([{
    type: 'dodge',
    marginRatio: 0
  }]);

chart.render();
React Hooks版：
import { Chart } from '@antv/g2';
import React, { useEffect, useState } from "react";

const CompareChartsDemo = () => {
  useEffect(() => {
	const data = [
  { company: 'Apple', type: '整体', value: 30 },
  { company: 'Facebook', type: '整体', value: 35 },
  { company: 'Google', type: '整体', value: 28 },
  { company: 'Apple', type: '非技术岗', value: 40 },
  { company: 'Facebook', type: '非技术岗', value: 65 },
  { company: 'Google', type: '非技术岗', value: 47 },
  { company: 'Apple', type: '技术岗', value: 23 },
  { company: 'Facebook', type: '技术岗', value: 18 },
  { company: 'Google', type: '技术岗', value: 20 },
  { company: 'Apple', type: '技术岗', value: 35 },
  { company: 'Facebook', type: '技术岗', value: 30 },
  { company: 'Google', type: '技术岗', value: 25 }
];

const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 500,
});

chart.data(data);

chart.scale('value', { nice: true, });

chart.legend({
  position: 'top'
});

chart
  .interval()
  .position('type*value').color('company')
  .adjust([{
    type: 'dodge',
    marginRatio: 0
  }]);

chart.render();
	}, []);
  return <div id="container"></div>
};
export default CompareChartsDemo ;

AntV g2图例项官方:https://g2.antv.vision/zh/examples/interaction/component#legend-active

Caiyun6666
关注
  • 6
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
ant-design-charts：绘图属性和通用配置
读心悦
05-05 2238
ant-design-charts是以G2Plot作为绘图引擎，来实现react可视化图表库，如果项目中以ant-design作为UI框架，那么使用ant-design-charts来实现数据可视化，是最合适不过了。绘图属性，指的是图表的样式配置，比如折线图的lineStyle，柱状图的columnStyle，也有一些图表组件样式配置属性，比如label的样式。在修改图表属性的时候，其实就是设置G2Plot的属性。
react-native-f2chart:F2本机图表
05-11
react-native-f2chart 本机图表 安装 1， yarn add react-native-f2chart or npm i react-native-f2chart 2，将node_moules/react-native-f2chart/src/f2chart.html到android/app/src/main/assets/f2chart.html 简单的演示 用法 import Chart from "react-native-f2chart" ; // 参考 https://antv.alipay.com/zh-cn/f2/3.x/demo/line/basic.html const initScript = data => ` (function(){ chart = new F2.Chart({ id: 'chart',
MySQL统计每个月的销售合计数据
米粉er的博客
09-17 5649
MySQL统计每个月的销售合计数据   在名为‘temp’数据库中有一张销售表(bb_sale),结构如下 字段名 类型 说明 备注 F1 Varchar 销售ID F2 Varchar 销售日期 日期格式：2014-02-14 F3 Varchar 销售金额   表中的数据如下   (1)统计2014年1至12月份，每个月的销售合计数据，格式如下：月份、金额 SELECT b.月份,COALESCE(SUM(a.F3),0) AS 金额 FROM bb_sale a RIG
Antv | G2-Plot图表在vue项目中的使用
qq_52403971的博客
09-23 4399
什么是G2-Plot G2Plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成，"G2Plot"中的 G2 即意指图形语法 (the Gramma of Graphics)，同时也致敬了 ggplot2。（详情可查看g2官网。） G2图表 、 Echarts图表都是我们在vue项目中视图化很好表现的形式，因此利用好图表对视图和模型数据进行连接，能够很好的进行数据分析和数据表达。 G2的特性： ???? 开箱即用、默认好用的高质量统计图表 ???? 提炼自企业级产品的
python画三维几何图形拼成的图案_使用 AntV/G2/G2Plot 如何优化图表体验
weixin_39598954的博客
12-10 617
G2Plot v2 版本，从今年 8 月开始开发，目前差不多已经快 4 个月了，达成：25+ 常用的统计图表80% 图表在复杂 BI，LowCode 产品中使用验证97% 代码单测覆盖率5+ 积极的社区同学参数在 v2 版本中，我们把通用的体验优从业务实现抽取出来，通用化配置化，把大部分体验优化方案内置到 G2 中，让 G2 和 G2Plot 的用户都可以直接配置开启各个图表的体验优化，用户可以方...
在vue中使用antV-G2展示柱状图之组件参数设置详解
黄俊的博客
10-28 5536
在vue中使用antV-G2展示柱状图_情天可视化的博客-CSDN博客G2 是一套基于图形语法理论的可视化底层引擎，以数据驱动，提供图形语法与交互语法，具有高度的易用性和扩展性。使用 G2，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。
关于React+antv g2柱状图的那些事
北鼻娃的博客
02-06 2499
关于antv g2柱状图的那些事 技术栈：react+antv g2 渲染基础柱状图： import React, { Component } from 'react' import { Chart } from '@antv/g2'; export class BarChart extends Component { componentDidMount() { const data = [ { time: '1951 年', value: 38 }, { time: '
react+Antv-g2 demo
小羽向前跑
02-28 3856
父组件Demo1.js import React, { Component } from 'react' import './relevance.css' import Relevancenum from './Relevancenum' import Tabschange from './Tabschange' export default class Demo1 extends ...
ffmpeg-win32-v3.2.4 下载_微信7.0.4内测版怎么申请？微信7.0.4安卓内测版下载安装教程...
weixin_39604983的博客
11-08 138
近日，微信针对安卓设备用户推出了最新的微信7.0.4内测版，带来了界面调整和功能更新，受到不少小伙伴们的关注。那么，微信7.0.4内测版怎么申请？下面小编为大家详细介绍下安卓版微信7.0.4内测版下载方法与安装使用教程，一起来看看吧。微信7.0.4内测版更新了什么？从内测描述界面来看，微信7.0.4主要带来了以下2个部分更新：1、发「视频动态」时，可以搜一首歌曲设为背景音乐；2、优化了一些体验问题...
React Antv G2Plot 「指标拆解图」 前端可视化实战 实现渲染、重置、筛选功能
Constantiny的博客
05-15 1112
实现对指定数据的「指标拆解图」 渲染，并且可以根据筛选项进行变化等功能，具体见文章。
g2plot-react：用于React的G2Plot
02-05
@ opd / g2plot-react 用于React的 安装 npm install @opd/g2plot-react 用法 import React , { useRef } from 'react' import { LineChart , LineChartProps } from '@opd/g2plot-react' const config : LineChartProps = { height : 350 , autoFit : true , xField : 'year' , yField : 'value' , smooth : true ,
react-hooks-redux-registration-login-example：React Hooks + Redux-用户注册和登录教程及示例
02-05
react-hooks-redux-registration-login-example React Hooks + Redux-用户注册和登录教程及示例 有关文档和现场演示，请参阅
react-react-redux：使用React Hooks和Proxy的React Redux绑定
02-05
react-react-redux v5-alpha（此存储库）：具有useMutableSource的实验性react-redux绑定。 它提供了useTrackedState，它可以跟踪render中状态的使用，它最初是在此repo中提出的。 ：该项目将为useTrackedState...
use-undo:React Hooks实现撤消和重做功能
05-02
使用React 撤消/重做功能。 安装 yarn add use-undo 用法 import React from 'react' ; import ReactDOM from 'react-dom' ; import useUndo from 'use-undo' ; const App = ( ) => { const [ countState , { ...
CP-DESIGN：可配置的移动UI组件（React hooks + Typescript + Scss）组件库
02-03
React hooks Typescript H5移动组件 English | 徽章 纽扣 图标 CP Design手机 可配置的Mobile UI规范和基于React的实现。 产品特点 遵循CP Design Mobile UI规范。 不同产品的可配置UI样式。 用TypeScript开发。...
Ant Design Pro --------------- ProTable高级表格细节用法（持续更新中...）
热门推荐
qq_48718857的博客
01-07 1万+
热门用法参考官方文档：https://procomponents.ant.design/components/table 一、菜单栏 有些时候菜单栏不需要那么多，而不对菜单栏进行设置就会默认全部显示。所以需要删除一些。 默认全为true,如果不要就设置为false即可。 例如不要刷新： <ProTable options={{ reload: false }} /> 例如全不要： <ProTable options={false .
React Hooks-----------Form中有自定义组件后getFieldsValue onFinish获取数据undefined
qq_48718857的博客
01-06 3104
已知 对于自定义或第三方的表单控件，也可以与 Form 组件一起使用。只要该组件遵循以下的约定： （1）提供受控属性 value 或其它与 valuePropName 的值同名的属性。 （2）提供 onChange 事件或 trigger 的值同名的事件。 （3）不能是函数式组件。 问题 但是React Hooks就是函数式组件，在进行表单提交时自定义组件中的值就不能被获取。如下图全为undefined 用法 父组件 const [form] = Form.useForm(); const {
React Hooks + Umi Hooks + Ant Design Pro -------- 实时请求数据，监测到数据改变就局部刷新表格
qq_48718857的博客
01-20 1258
1.前期准备 必要条件1：首先得有一个高级表格，没有自己就去官方文档找一个 必要条件2：高级表格获取数据源方式为request 必要条件3：有umi的包 能用useRequest(setTimeout应该也可以但操作应该不一样) 原因：我用的这个 2.实现 1.定义两个状态 params用来装局部刷新的请求数据 compareData用来装最近两次请求回来的数据 const [params, setParams] = useState<any>({}); const [compareDa
antv g2plot 2.4.7版本堆叠柱线图表-显示多折线折线图脱离canvas
最新发布
05-31
要显示多个折线图并避免它们脱离画布，您可以使用 `theme` 属性来调整 G2Plot 的主题样式。下面是一个示例代码，演示如何创建一个堆叠柱线图表，并显示多个折线图。 ```jsx import React, { Component } from 'react'; import { StackedColumnLine } from '@antv/g2plot'; class StackedColumnLineChart extends Component { constructor(props) { super(props); this.chartRef = React.createRef(); } componentDidMount() { const data = [ { year: '1991', value: 3, type: 'sales' }, { year: '1992', value: 4, type: 'sales' }, { year: '1993', value: 3.5, type: 'sales' }, { year: '1994', value: 5, type: 'sales' }, { year: '1995', value: 4.9, type: 'sales' }, { year: '1996', value: 6, type: 'sales' }, { year: '1997', value: 7, type: 'sales' }, { year: '1998', value: 9, type: 'sales' }, { year: '1999', value: 13, type: 'sales' }, { year: '1991', value: 1, type: 'profits' }, { year: '1992', value: 3, type: 'profits' }, { year: '1993', value: 1.5, type: 'profits' }, { year: '1994', value: 2, type: 'profits' }, { year: '1995', value: 1.9, type: 'profits' }, { year: '1996', value: 4, type: 'profits' }, { year: '1997', value: 5, type: 'profits' }, { year: '1998', value: 8, type: 'profits' }, { year: '1999', value: 10, type: 'profits' }, ]; const lineTheme = { geometries: { line: { style: { lineWidth: 2, }, }, }, }; const chart = new StackedColumnLine(this.chartRef.current, { data, xField: 'year', yField: 'value', xAxis: { label: { autoRotate: false, }, }, yAxis: { label: { formatter: (value) => `${value}k`, }, }, seriesField: 'type', legend: { position: 'top', }, theme: { styleSheet: { ...lineTheme, }, }, }); chart.render(); } componentWillUnmount() { if (this.chart) { this.chart.destroy(); } } render() { return <div ref={this.chartRef}></div>; } } export default StackedColumnLineChart; ``` 在上面的代码中，我们定义了一个 `lineTheme` 对象，用于调整折线图的样式。然后，我们在创建图表实例时，将 `lineTheme` 对象添加到主题中。这样，我们就可以根据需要调整折线图的线宽和样式，从而避免它们脱离画布。 另外，我们还可以通过设置 `xAxis.label.autoRotate` 属性来禁用 X 轴标签的自动旋转，以确保标签不重叠。同时，我们通过设置 `yAxis.label.formatter` 属性来自定义 Y 轴标签的格式，以便更好地显示数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值