ant-design / ant-design-charts

A React Chart Library
https://ant-design-charts.antgroup.com/
MIT License
1.95k stars 364 forks source link

🧐[问题] 怎么画甘特图 #1912

Closed wangwc-dev closed 11 months ago

wangwc-dev commented 1 year ago

ant-design-charts怎么画区间甘特图(时间作为横坐标),类似于下面这个 image

ai-qing-hai commented 11 months ago

是什么版本的? 2.0 的可以是

import { Bar } from '@ant-design/plots';
import React from 'react';
import ReactDOM from 'react-dom';

const DemoBar = () => {

  const events = [
    { name: 'event planning', startTime: 1, endTime: 4 },
    { name: 'layout logistics', startTime: 3, endTime: 13 },
    { name: 'select vendors', startTime: 5, endTime: 8 },
    { name: 'hire venue', startTime: 9, endTime: 13 },
    { name: 'hire caterer', startTime: 10, endTime: 14 },
    { name: 'hire event decorators', startTime: 12, endTime: 17 },
    { name: 'rehearsal', startTime: 14, endTime: 16 },
    { name: 'event celebration', startTime: 17, endTime: 18 },
  ];

  const config = {
    data: events,
    xField: 'name',
    yField: ['endTime', 'startTime'],
    colorField: 'name'
  };
  return <Bar {...config} />;
};

ReactDOM.render(<DemoBar />, document.getElementById('container'));
eruca commented 10 months ago

可以用dayjs来作为X轴吗,我尝试了多次都是失败 @ai-qing-hai