weixin_39573598
weixin_39573598
2020-12-25 17:33

折线图可以设置双x轴吗

该提问来源于开源项目:ant-design/ant-design-charts

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

4条回答

  • weixin_39593519 weixin_39593519 4月前
    ts
    import React, { useState, useEffect } from 'react';
    import { DualLine } from '-design/charts';
    const DemoLine: React.FC = () => {
      const data1 = [
      { 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 data2 = [
      { year: '1991', count: 10 },
      { year: '1992', count: 4 },
      { year: '1993', count: 5 },
      { year: '1994', count: 5 },
      { year: '1995', count: 4.9 },
      { year: '1996', count: 35 },
      { year: '1997', count: 7 },
      { year: '1998', count: 1 },
      { year: '1999', count: 20 },
    ];
      const config = {
        title: {
        visible: true,
        text: '双折线图',
      },
      description: {
        visible: true,
        text: '双折线混合图表',
      },
      data: [data1, data2],
      xField: 'year',
      yField: ['value', 'count'],
      };
      return <dualline></dualline>;
    };
    export default DemoDualLine;
    
    点赞 评论 复制链接分享
  • weixin_39593519 weixin_39593519 4月前
    ts
    lineConfigs: [
        { color: '#29cae4', smooth: false, lineSize: 3 },
        {
          color: '#586bce',
          smooth: true,
          point: {
            visible: true,
          },
          label: {
            visible: true,
          },
          lineSize: 4,
          lineStyle: {
            opacity: 0.5,
          },
        },
      ]
    
    点赞 评论 复制链接分享
  • weixin_39573598 weixin_39573598 4月前

    感谢回答,我想要的是上面样例中的data1和data2数组中的year是两组不同的值,可以做到吗?代码跑起来后X轴值显示一个值

    点赞 评论 复制链接分享
  • weixin_39593519 weixin_39593519 4月前

    上层转换一下就好了, 目前底层没做处理。

    点赞 评论 复制链接分享

相关推荐