Ant design pro (八) 簡單的圖表使用

1. 官方示例代碼

import React from 'react';
import { Line } from '@ant-design/charts';

const Page: React.FC = () => {
  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,
    height: 400,
    xField: 'year',
    yField: 'value',
    point: {
      size: 5,
      shape: 'diamond',
    },
  };
  return <Line {...config} />;
};
export default Page;
           

2. 加到工程中

import { Card, Tabs, Input, Typography, Space, message, Button } from 'antd';
import styleObj from '../components/style'

import React from 'react';
import { useState } from 'react';
import { postData, getData } from '@/services/demo';
import Marquee from './components/Marquee'
import { Line } from '@ant-design/charts';

const { Text } = Typography;
const { Search } = Input;

const DemoPage: React.FC = () => {
    const [currentKey, setCurrentKey] = useState("1");
    const [tabText1, setTabText1] = useState("Tab1");
    const [tabText2, setTabText2] = useState("Tab2");
    const [tabText3, setTabText3] = useState("Tab3");
    const [marqueeState, setMarqueeState] = useState('start');


    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,
        height: 400,
        xField: 'year',
        yField: 'value',
        point: {
          size: 5,
          shape: 'diamond',
        },
      };

    const handleOnChange = (key:string) => {
        console.log("handleOnChange: " + key);
        setCurrentKey(key);
    }

    const onStop = ()=>{
        setMarqueeState('stop');
    }

    const onStart = ()=>{
        setMarqueeState('start');
    }

    async function onSearch (text:string) {
        console.log("Current Key: ", currentKey, ", On Search Text: ", text);
        
        let dat = { text: text };
        try {
            switch (currentKey){
                case '1': {
                    let result = await postData(dat);
                    setTabText1(result.data.text);
                    break;
                } 
                case '2': {
                    let result = await getData(dat);
                    setTabText2(result.data.text);
                    break;
                }
                case '3': {
                    let result = await postData(dat);
                    setTabText3(result.data.text);
                    break;
                }
                default: {break;}
            }
            message.success("successful");
          } catch (error) {
            // message.error("unknown error");
          }
          return;
    }


    return (
        <div className="site-card-border-less-wrapper">
        <Card title='demo_page' style={styleObj.CardStyle} headStyle =  {styleObj.HeadStyle}>
        <Tabs defaultActiveKey="1" activeKey={ currentKey } onChange={ handleOnChange }>
        <Tabs tab="Demo_Tab_1" key="1"/> 
        <Tabs tab="Demo_Tab_2" key="2"/>
        <Tabs tab="Demo_Tab_3" key="3"/>
        <Tabs tab="Demo_Tab_4" key="4"/>
        </Tabs>
        {
            currentKey === '1' && (
                <Space direction="vertical">
                    <Search placeholder="input search text1" onSearch={onSearch} enterButton />
                    <Text> { tabText1 } </Text>
                </Space>
            )
        }
        {
            currentKey === '2' && (
                <Space direction="vertical">
                    <Search placeholder="input search text2" onSearch={onSearch} enterButton />
                    <Text> { tabText2 } </Text>
                </Space>
            )
        }
        {
            currentKey === '3' && (
                <Space direction="vertical">
                    <Marquee text = "你好世界，1111" state = {marqueeState} bold = {true} fontSize = {80} />
                    <Button icon="start" onClick={onStart} > 開始 </Button>
                    <Button icon="pause" onClick={onStop} > 暫停 </Button>
                </Space>
                // <Space direction="vertical">
                //     <Search placeholder="input search text3" onSearch={onSearch} enterButton />
                //     <Text> { tabText3 } </Text>
                // </Space>
            )
        }
        {
            currentKey === '4' && (
                <Line {...config} />
            )
        }
        </Card>
        </div>
    );
};

export default DemoPage;
           

3. 效果如下

Ant Design Pro 使用筆記

官方示例

所有圖表