antvis/G2

SortX for non ordinal channel #5951

YiSiWang posted onGitHub

问题描述

.scale('x', { type: 'linear', tickMethod: () => [1, 2, 3, 4] }) 指定 tick 后,加上 .transform({ type: 'sortX', reverse: true }) 会导致 x 轴只显示两个 tick

<img width="1528" alt="image" src="https://github.com/antvis/G2/assets/20316342/bbe942aa-4e19-4381-b220-2f82f0bc2ee9">

重现链接

No response

重现步骤

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

chart
  .point()
  .data(
    [
      {type: 'A', value: 1},
      {type: 'B', value: 2},
      {type: 'C', value: 3},
      {type: 'D', value: 4},
    ]
  )
  .encode('y', 'type')
  .encode('x', 'value')
  .encode('shape', 'point')
  // .transform({ type: 'sortX', reverse: true })
  .scale('size', { type: 'log', range: [4, 20] })
  .scale('y', { type: 'point', padding: 0 })
  .scale('x', { type: 'linear', tickMethod: () => [1, 2, 3, 4], })
  .style('fillOpacity', 0.3)
  .style('lineWidth', 1)
  .axis('x', { line: true, grid: true, gridLineDash: [0, 0], gridStrokeOpacity: 0.5, tick: false })
  .axis('y', { line: true, grid: true, gridLineDash: [0, 0], gridStrokeOpacity: 0.5, tick: false })
  .legend('size', false);

chart.render();

预期行为

No response

平台

  • 操作系统: [macOS, Windows, Linux, React Native ...]
  • 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频(可选)

No response

补充说明(可选)

No response


x 通道是连续数据,应该如下使用 sortX:

.transform({ 
  type: 'sortX', 
  reverse: true, 
  ordinal: false // 说明是连续数据
})
posted by pearmini over 1 year ago

great

posted by YiSiWang over 1 year ago

Fund this Issue

$0.00
Funded

Pull requests