ant-design / ant-design-charts

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

🧐[问题]如何对tooltip中的item按指定顺序显示? #2429

Closed smoothdvd closed 8 months ago

smoothdvd commented 8 months ago

🧐 问题描述 [详细地描述问题,让大家都能理解]

在ant- design-charts 2.x中tooltip中的item按指定顺序显示?

💻 示例代码 [如果有必要,展示代码,线上示例,或仓库]

data = [
{date: "2024-02-22", value: 3138, type: "Android"},
{date: "2024-02-23", value: 3580, type: "Android"},
{date: "2024-02-24", value: 3460, type: "Android"},
{date: "2024-02-22", value: 9485, type: "iOS"},
{date: "2024-02-23", value: 8253, type: "iOS"},
{date: "2024-02-24", value: 7809, type: "iOS"},
{date: "2024-02-22", value: 12623, type: "总计"},
{date: "2024-02-23", value: 11833, type: "总计"},
{date: "2024-02-24", value: 11269, type: "总计"}
]

<Line
                  className='chart'
                  {...{
                    data,
                    renderer: new SVGRenderer(),
                    supportCSSTransform: true,
                    legend: false,
                    tooltip: {},
                    axis: {
                      x: {
                        labelFormatter: (text: string) => {
                          return text.substring(5, 10);
                        },
                        line: true,
                        lineStrokeOpticity: 0.45,
                        tickCount: 7,
                        range: [0, 1],
                      },
                      y: {
                        grid: null,
                        tick: false,
                        labelFormatter: (v) =>
                          `${v}`.replace(
                            /\d{1,3}(?=(\d{3})+$)/g,
                            (s) => `${s},`,
                          ),
                      },
                    },
                    xField: 'date',
                    yField: 'value',
                    colorField: 'type',
                    seriesField: 'type',
                    shapeField: 'smooth',
                    theme: {
                      type: 'classicDark',
                      view: {
                        viewFill: 'transparent',
                      },
                    },
                    scale: {
                      y: {
                        domainMin: 0,
                        tickCount: 4,
                        tickRange: [0, 1],
                      },
                    },
                    marginLeft: 0,
                    marginRight: 0,
                    marginBottom: 0,
                  }}
                />

🚑 其他信息 [如截图等其他信息可以贴在这里]

1.x版

Screenshot 2024-02-29 at 3 27 06 PM

2.x版

Screenshot 2024-02-29 at 3 14 04 PM

tooltip中的items顺序如何按1.x版中的顺序显示?

lxfu1 commented 8 months ago
    interaction: {
      tooltip: {
        sort: (item) => {
          return item.value
        }
      }
    },