Ant Design Charts 自定义提示信息、图例、文本信息

这篇具有很好参考价值的文章主要介绍了Ant Design Charts 自定义提示信息、图例、文本信息。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Ant Design Charts

ant-design/charts,javascript,前端,react.js

自定义图例 legend
关闭图例
legend: false;

图例配置参数,布局类型 layout 图例展示位置 position

legend: {
  layout: 'horizontal',
  position: 'right'
}

布局类型 layout
optional horizontal | vertical
图例布局方式。提供横向布局和纵向布局。

图例展示位置 position
图例位置,可选项:‘top’, ‘top-left’, ‘top-right’, ‘left’, ‘left-top’, ‘left-bottom’, ‘right’, ‘right-top’, ‘right-bottom’, ‘bottom’, ‘bottom-left’, ‘bottom-right’。

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Pie } from '@ant-design/plots';
const DemoPie = () => {
  const data = [
    {
      type: '分类一',
      value: 27,
    },
    {
      type: '分类二',
      value: 25,
    },
    {
      type: '分类三',
      value: 18,
    },
  ];
  const config = {
    appendPadding: 10,
    data,
    angleField: 'value',
    colorField: 'type',
    radius: 0.9,
    legend: {
     position: 'bottom'
    },
  };
  return <Pie {...config} />;
};

ReactDOM.render(<DemoPie />, document.getElementById('container'));

自定义文本标签 label
属性名 类型 介绍
type string 当用户使用了自定义的 label 类型,需要声明具体的 type 类型,否则会使用默认的 label 类型渲染(饼图 label 支持 `inner
offset number label 的偏移量
offsetX number label 相对于数据点在 X 方向的偏移距离
offsetY number label 相对于数据点在 Y 方向的偏移距离
content *string IGroup
style ShapeAttrs label 文本图形属性样式
autoRotate string 是否自动旋转,默认 true
rotate number 文本旋转角度
labelLine null boolean
labelEmit boolean 只对极坐标下的文本生效,表示文本是否按照角度进行放射状显示,true 表示开启,false 表示关闭
layout *‘overlap’ ‘fixedOverlap’
position *‘top’ ‘bottom’
animate boolean AnimateOption
formatter Function 格式化函数
autoHide boolean 是否自动隐藏,默认 false

import
 React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Pie } from '@ant-design/plots';
const DemoPie = () => {
  const data = [
    {
      type: '分类一',
      value: 27,
    },
    {
      type: '分类二',
      value: 25,
    },
    {
      type: '分类三',
      value: 18,
    },
  ];
  const config = {
    appendPadding: 10,
    data,
    angleField: 'value',
    colorField: 'type',
    radius: 0.9,
    label: {
       // 可手动配置 label 数据标签位置
       position: 'middle',
       // 'top', 'bottom', 'middle'
       // 可配置附加的布局方法
       layout: [
         // 柱形图数据标签位置自动调整
         {
           type: 'interval-adjust-position',
         }, // 数据标签防遮挡
         {
           type: 'interval-hide-overlap',
         }, // 数据标签文颜色自动调整
         {
           type: 'adjust-color',
         },
       ],
     },
  };
  return <Pie {...config} />;
};

ReactDOM.render(<DemoPie />, document.getElementById('container'));

自定义提示信息 tooltip
指定 tooltip 中显示的字段,默认不同图表有不同的默认字段列表。配合 formatter 配置一起使用,效果更佳。

tooltip: {
  fields: ['想要显示的字段一般是data中的值或者x,y轴数据'],
}

格式化 tooltip item 内容

tooltip: {
  formatter: (item) => {
    return { name: item.type, value: item.value + '%' };
  },
}

格式化 输出样式 itemTpl文章来源地址https://www.toymoban.com/news/detail-673468.html

import
 React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Pie } from '@ant-design/plots';
const DemoPie = () => {
  const data = [
    {
      type: '分类一',
      value: 27,
      percent:30,
    },
    {
      type: '分类二',
      value: 25,
      percent:30,
    },
    {
      type: '分类三',
      value: 18,
      percent:40,
    },
  ];
  const config = {
    appendPadding: 10,
    data,
    angleField: 'value',
    colorField: 'type',
    radius: 0.9,
 	tooltip: {
        showTitle: false,//关闭标题
        fields: ['type', 'percent', 'value'],
        formatter: (item) => {
          return { type: item.type, percent: item.percent,value:item.value};
        },
        itemTpl: '<div><p class="g2-tooltip-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{type}</p><p class="g2-tooltip-item"><span  class="g2-tooltip-marker"></span>{value}</p><p class="g2-tooltip-item"><span  class="g2-tooltip-marker"></span>{percent} %</p></div>'

      }
  };
  return <Pie {...config} />;
};

ReactDOM.render(<DemoPie />, document.getElementById('container'));

到了这里,关于Ant Design Charts 自定义提示信息、图例、文本信息的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 26、react UI 组件库 Ant-design 蚂蚁金服UI组件库

    material-ui (国外) 官网:https://mui.com/zh/material-ui/getting-started/installation/ 这是国外非常流行的 react UI 组件库,但是在国内并不是很常用。 Ant-design UI组件库 官网:https://ant.design/index-cn 这是国内比较流行 react UI 组件库,又蚂蚁金服团队开发。这一篇博客主要来讲解在 react 项目中

    2024年02月08日
    浏览(36)
  • vue2安装ant-design UI报错 ERR! peer vue@“>=3.2.0“ from ant-design-vue@3.2.15

    npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: default@0.1.0 npm ERR! Found: vue@2.7.14 npm ERR!   vue@\\\"^2.6.10\\\" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer vue@\\\"=3.2.0\\\" from ant-design-vue@3.2.15 npm ERR! node_modules/ant-design-vue npm ERR!   ant-design

    2024年02月01日
    浏览(55)
  • Ant-Design 官方网站总是打不开,那么我们则需要使用以下该官网的镜像地址来打开;

      1、 Ant-Design 官网原地址: https://ant.design/index-cn Ant-Design 官网镜像地址:http://ant-design.gitee.io/index-cn 或者  Ant Design - 一套企业级 UI 设计语言和 React 组件库   2、 Ant-Design-Pro 原地址: https://pro.ant.design/index-cn Ant-Design-Pro 镜像地址:http://ant-design-pro.gitee.io/index-cn   3、

    2024年02月12日
    浏览(48)
  • React——Ant Design组件库Message全局提示的使用

    官网推荐使用Hook调用的方法         这种方法只能在本页显示,如果显示后跳转页面就不会显示。因为{contextHolder}是写在本页面的。如果需要跳转页面可以用promise调用 传递的参数依次为,提示信息、显示时间、关闭后触发的回调

    2024年02月11日
    浏览(44)
  • Ant Design Vue实现表格双击编辑、添加新行、文字提示

    早上刚上班,产品就朝我工位走了过来,一看大事不好,肯定又是来提需求的! 产品:做一个表格,要实现双击编辑的功能 我:做不了 产品:老板提的 我:好的,可以做 老板提的不能做也滴做😂 申明:项目基于Vue+Ant Design实现 想要实现双击编辑单元格,先开发一个简单的

    2024年02月11日
    浏览(48)
  • 【React】Ant Design自定义主题风格及主题切换

    Ant Design 的自定义主题,对于刚入手的时候感觉真是一脸蒙圈,那今天给它梳理倒腾下; 整体样式变化,主要两个部分: https://ant.design/docs/react/customize-theme-cn#theme 官方介绍一大堆,咱们粗暴点就当作 key=value 配置内容来看和理解! 大体分为四块配置项: 分类 涉及配置项 通

    2024年04月22日
    浏览(40)
  • 后端传递的图标是字符串形式的 Ant Design 图标组件怎么避免被解析为普通文本

    问题描述 后端传递导航,数据格式带了icon。如下 不做处理渲染的话结果如下   解决方案 导入需要的antd组件,在拿到后端数据后把原本的icon字符串替换为antd对应的icon组件

    2024年01月20日
    浏览(49)
  • Vue 3 中 Ant Design Vue 如何自定义表格 Table 的表头(列头)内容?

    项目用到的是 Ant Design Vue (2.2.8) 组件库,开发中遇到一个如下图的表格,有些表头文本后面会有一些自定义图标,鼠标移入图标时显示对应的审批时间提示。当前列如果没有审批时间就会隐藏图标,只展示列头文本。 使用 Ant Design Vue 基础的 Table 组件是无法满足这个场景的

    2024年02月16日
    浏览(45)
  • ant.design(简称antd)中Form表单组件提交表单、表单数据效验、表单自定义效验、表单布局集合

            ant.design(简称antd)现在我们使用较为广泛,web端中后台表单使用非常广泛,此遍文章集合了表单日常用法及使用注意事项。         下图是UI目标样式图                           1、以下是一个组件,首先引入ant相关依赖,在引入react相关依赖,主要使用了For

    2024年02月13日
    浏览(59)
  • vue2+ant-design-vue a-select组件二次封装(支持单选/多选添加全选/分页(多选跨页选中)/自定义label)

    参数 说明 类型 默认值 v-model 绑定值 boolean / string / number/Array - mode 设置’multiple’\\\'tags’多选 (显示全选) String - optionSource 下拉数据源 Array - width select宽度(可以设置百分比或px) String 100% customLabel 是否自定义设置下拉label String - valueKey 传入的 option 数组中,要作为最终选择

    2024年02月08日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包