VisActor VBI

    sort

    排序

    排序配置, 统计类图表, 可根据指标或维度对类目轴或图例排序, 或自定义顺序

    sortAXis

    指标排序

    export const SortAxisByMeasure = memo(() => {
  const vseed: VSeed = {
    chartType: 'line',
    dataset: [
      { date: '2019', profit: 10, sales: 20, count: 15 },
      { date: '2020', profit: 30, sales: 60, count: 33 },
      { date: '2021', profit: 30, sales: 60, count: 22 },
      { date: '2022', profit: 50, sales: 100, count: 14 },
      { date: '2023', profit: 40, sales: 80, count: 30 },
    ],
    dimensions: [{ id: 'date', alias: '日期' }],
    measures: [
      { id: 'count', alias: '数量' },
      { id: 'sales', alias: '销售额', parentId: 'group' },
      { id: 'profit', alias: '利润', parentId: 'group' },
    ],
    sort: {
      order: 'desc',
      orderBy: 'sales',
    },
  }
  return <PivotChart vseed={vseed} />
})

    维度排序

    export const SortAxisByDimension = memo(() => {
  const vseed: VSeed = {
    chartType: 'line',
    dataset: [
      { date: '2019', profit: 10, sales: 20, count: 50 },
      { date: '2020', profit: 30, sales: 60, count: 50 },
      { date: '2021', profit: 30, sales: 60, count: 50 },
      { date: '2022', profit: 50, sales: 100, count: 50 },
      { date: '2023', profit: 40, sales: 80, count: 50 },
    ],
    dimensions: [{ id: 'date', alias: '日期' }],
    measures: [
      { id: 'profit', alias: '利润' },
      { id: 'sales', alias: '销售额' },
      { id: 'count', alias: '数量' },
    ],
    sort: {
      order: 'desc',
      orderBy: 'date',
    },
  }
  return <VChartRender vseed={vseed} />
})

    自定义排序

    export const SortAxisByCustom = memo(() => {
  const vseed: VSeed = {
    chartType: 'line',
    dataset: [
      { date: '2019', profit: 10, sales: 20, count: 50 },
      { date: '2020', profit: 30, sales: 60, count: 50 },
      { date: '2021', profit: 30, sales: 60, count: 50 },
      { date: '2022', profit: 50, sales: 100, count: 50 },
      { date: '2023', profit: 40, sales: 80, count: 50 },
    ],
    dimensions: [{ id: 'date', alias: '日期' }],
    measures: [
      { id: 'profit', alias: '利润' },
      { id: 'sales', alias: '销售额' },
      { id: 'count', alias: '数量' },
    ],
    sort: {
      customOrder: ['2022', '2023', '2021', '2020', '2019'],
    },
  }
  return <VChartRender vseed={vseed} />
})

    sortLegend

    图例自身排序

    Tip

    仅传入 order 则按图例自身的字符顺序排序

    export const SortLegendBySelf = memo(() => {
  const vseed: VSeed = {
    chartType: 'column',
    dataset: [
      { date: '2019', profit: 10, sales: 20, count: 15 },
      { date: '2020', profit: 30, sales: 60, count: 33 },
      { date: '2021', profit: 30, sales: 60, count: 22 },
      { date: '2022', profit: 50, sales: 100, count: 14 },
      { date: '2023', profit: 40, sales: 80, count: 30 },
    ],
    dimensions: [{ id: 'date', alias: '日期' }],
    measures: [
      { id: 'count', alias: '数量' },
      { id: 'sales', alias: '销售额' },
      { id: 'profit', alias: '利润' },
    ],
    sortLegend: {
      order: 'desc',
    },
  }
  return <VChartRender vseed={vseed} />
})

    指标排序

    export const SortLegendByMeasure = memo(() => {
  const vseed: VSeed = {
    chartType: 'line',
    dataset: [
      { date: '2019', profit: 10, sales: 20, count: 15 },
      { date: '2020', profit: 30, sales: 60, count: 33 },
      { date: '2021', profit: 30, sales: 60, count: 22 },
      { date: '2022', profit: 50, sales: 100, count: 14 },
      { date: '2023', profit: 40, sales: 80, count: 30 },
    ],
    dimensions: [{ id: 'date', alias: '日期' }],
    measures: [
      { id: 'count', alias: '数量' },
      { id: 'sales', alias: '销售额', parentId: 'group' },
      { id: 'profit', alias: '利润', parentId: 'group' },
    ],
    sortLegend: {
      order: 'desc',
      orderBy: 'sales',
    },
  }
  return <PivotChart vseed={vseed} />
})

    维度排序

    export const SortLegendByDimension = memo(() => {
  const vseed: VSeed = {
    chartType: 'line',
    dataset: [
      { date: '2019', profit: 10, sales: 20, count: 50 },
      { date: '2020', profit: 30, sales: 60, count: 50 },
      { date: '2021', profit: 30, sales: 60, count: 50 },
      { date: '2022', profit: 50, sales: 100, count: 50 },
      { date: '2023', profit: 40, sales: 80, count: 50 },
    ],
    dimensions: [{ id: 'date', alias: '日期',   }],
    measures: [
      { id: 'profit', alias: '利润' },
      { id: 'sales', alias: '销售额' },
      { id: 'count', alias: '数量' },
    ],
    sortLegend: {
      order: 'desc',
      orderBy: 'date',
    },
  }
  return <VChartRender vseed={vseed} />
})

    自定义排序(图例名称)

    Tip

    builder.getColorItems() 可获取到图例名称的数组

    export const SortLegendByCustom = memo(() => {
  const vseed: VSeed = {
    chartType: 'line',
    dataset: [
      { date: '2019', profit: 10, sales: 20, count: 50 },
      { date: '2020', profit: 30, sales: 60, count: 50 },
      { date: '2021', profit: 30, sales: 60, count: 50 },
      { date: '2022', profit: 50, sales: 100, count: 50 },
      { date: '2023', profit: 40, sales: 80, count: 50 },
    ],
    dimensions: [{ id: 'date', alias: '日期',   }],
    measures: [
      { id: 'profit', alias: '利润' },
      { id: 'sales', alias: '销售额' },
      { id: 'count', alias: '数量' },
    ],
    sortLegend: {
      customOrder: ['销售额', '数量', '利润'],
    },
  }
  return <VChartRender vseed={vseed} />
})

    自定义排序(图例Id)

    Tip

    builder.getColorIdMap() 可获取到图例id和名称的映射关系

    export const SortLegendByCustomId = memo(() => {
  const vseed: VSeed = {
    chartType: 'columnParallel',
    dataset: [
      { date: '2019', profit: 10, sales: 20, count: 50 },
      { date: '2020', profit: 30, sales: 60, count: 50 },
      { date: '2021', profit: 30, sales: 60, count: 50 },
      { date: '2022', profit: 50, sales: 100, count: 50 },
      { date: '2023', profit: 40, sales: 80, count: 50 },
    ],
    dimensions: [{ id: 'date', alias: '日期',   }],
    measures: [
      { id: 'profit', alias: '利润' },
      { id: 'sales', alias: '销售额' },
      { id: 'count', alias: '数量' },
    ],
    sortLegend: {
      customOrder: ['数量-count', '销售额-sales', '利润-profit'],
    },
  }
  return <VChartRender vseed={vseed} />
})