Ant Design Charts

自定義圖例 legend
關(guān)閉圖例
legend: false;

圖例配置參數(shù)，布局類型 layout 圖例展示位置 position

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

布局類型 layout
optional horizontal | vertical
圖例布局方式。提供橫向布局和縱向布局。

圖例展示位置 position
圖例位置，可選項(xiàng)：‘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'));

自定義文本標(biāo)簽 label
屬性名 類型 介紹
type string 當(dāng)用戶使用了自定義的 label 類型，需要聲明具體的 type 類型，否則會使用默認(rèn)的 label 類型渲染（餅圖 label 支持 `inner
offset number label 的偏移量
offsetX number label 相對于數(shù)據(jù)點(diǎn)在 X 方向的偏移距離
offsetY number label 相對于數(shù)據(jù)點(diǎn)在 Y 方向的偏移距離
content *string IGroup
style ShapeAttrs label 文本圖形屬性樣式
autoRotate string 是否自動旋轉(zhuǎn)，默認(rèn) true
rotate number 文本旋轉(zhuǎn)角度
labelLine null boolean
labelEmit boolean 只對極坐標(biāo)下的文本生效，表示文本是否按照角度進(jìn)行放射狀顯示，true 表示開啟，false 表示關(guān)閉
layout *‘overlap’ ‘fixedOverlap’
position *‘top’ ‘bottom’
animate boolean AnimateOption
formatter Function 格式化函數(shù)
autoHide boolean 是否自動隱藏，默認(rèn) 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 數(shù)據(jù)標(biāo)簽位置
       position: 'middle',
       // 'top', 'bottom', 'middle'
       // 可配置附加的布局方法
       layout: [
         // 柱形圖數(shù)據(jù)標(biāo)簽位置自動調(diào)整
         {
           type: 'interval-adjust-position',
         }, // 數(shù)據(jù)標(biāo)簽防遮擋
         {
           type: 'interval-hide-overlap',
         }, // 數(shù)據(jù)標(biāo)簽文顏色自動調(diào)整
         {
           type: 'adjust-color',
         },
       ],
     },
  };
  return <Pie {...config} />;
};

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

自定義提示信息 tooltip
指定 tooltip 中顯示的字段，默認(rèn)不同圖表有不同的默認(rèn)字段列表。配合 formatter 配置一起使用，效果更佳。

tooltip: {
  fields: ['想要顯示的字段一般是data中的值或者x，y軸數(shù)據(jù)'],
}

格式化 tooltip item 內(nèi)容

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

格式化 輸出樣式 itemTpl文章來源地址http://www.zghlxwxcb.cn/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,//關(guān)閉標(biāo)題
        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'));

到了這里，關(guān)于Ant Design Charts 自定義提示信息、圖例、文本信息的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！