log

linear

ordinal

概述

Ant Design Charts 中 对数比例尺（log scale） 是使用对数函数进行数据映射，基于指数关系的非线性分布,针对呈现指数增长的数据。当 data 中的数值范围跨度很大而导致部分图形密集或者空白过多时，可以优先考虑使用。

基于数学公式 y = log(base) + b 。

线性比例尺（linear scale）

对数比例尺（log scale）

使用方式

import { Scatter } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom';

const Demo = () => {

  const config ={
      autoFit: true,
      height: 300,
      data: [
        { year: '1991', value: 1 },
        { year: '1992', value: 10 },
        { year: '1993', value: 100 },
        { year: '1994', value: 1000 },
        { year: '1995', value: 10000 },
      ],
      xField: 'year',
      yField: 'value',
      scale: {
        y: {
          type: 'log',
          // 刻度数
          tickCount: 5,
          // 生成均匀的刻度
          tickMethod: (min, max, count, base) => {
            // 计算对数范围
            const logMin = Math.log(min) / Math.log(base);
            const logMax = Math.log(max) / Math.log(base);
            // 计算对数步长
            const logStep = (logMax - logMin) / (count - 1);
            // 生成刻度数组
            const ticks = [];
            for (let i = 0; i < count; i++) {
              const logValue = logMin + i * logStep;
              const value = Math.pow(base, logValue);
              // 过滤超出范围的值
              if (value >= min && value <= max) {
                ticks.push(Math.round(value));
              }
            }
            return ticks;
          },
        },
      },
      children: [
        { type: 'line', labels: [{ text: 'value', style: { dx: -10, dy: -12 } }] },
        { type: 'point', style: { fill: 'white' }, tooltip: false },
      ]
  };

  return <Scatter {...config} />;
};

createRoot(document.getElementById('container')).render(<Demo />);

选项

属性	描述	类型	默认值
domain	设置数据的定义域范围	`number[]`	输入数据的最大最小值范围
domainMin	设置数据的定义域最小值	`number`	输入数据的最小值
domainMax	设置数据的定义域最大值	`number`	输入数据的最大
range	设置数据映射的值域范围	`number[]` \| `string[]`	`[0, 1]`
rangeMin	设置数据映射的值域最小值	`number \| string`	`0`
rangeMax	设置数据映射的值域最大值	`number \| string`	`1`
unknown	对于 `undefined`， `NaN`，`null` 空值，返回的数据	`any`	`undefined`
tickCount	设置推荐的 tick 生成数量，tickCount 只是建议值，不会完全按照这个值产生 tick	`number`	`5`
tickMethod	设置生成 tick 的方法，常用于自定义 tick	`(min: number, max: number, count: number) => number[]`	`calculateLogTicks`
round	输出值去四舍五入	`boolean`	`false`
clamp	将映射值限定在 range 的范围内	`boolean`	`false`
nice	扩展 domain 范围，让输出的 tick 展示得更加友好	`boolean`	`false`
interpolate	自定义差值函数	`(a: number, b: number) => (t: number) => T`	`(a, b) => (t) => a * (1 - t) + b * t`
base	设定对数底	`number`	`10`

配置及注意事项:

{
  scale: {
    y: {
      type: 'log', // 注意 当数据返回跨度正负数的时候,请勿使用 log。
      domainMin: 10,
      domainMax: 1000,
      base: 100, // 设置 base 底数为 100,
    }
  }
}

如果需要最小值 domainMin:0 的情况，可参考图表示例 - 对数柱形图页面。

示例

格式化转化为 linear

import { DualAxes } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom';

const Demo = () => {

  const config ={
      autoFit: true,
      height: 300,
      data: [
        { year: '1991', value: 1 },
        { year: '1992', value: 10 },
        { year: '1993', value: 1000 },
        { year: '1994', value: 0.1 },
        { year: '1995', value: 100 },
      ],
      xField: 'year',
      yField: 'value',
      scale: { x: { range: [0, 1] }, y: { type: 'log', tickCount: 4 } },
      axis: {
        y: {
          labelFormatter: (v) => {
            return Math.log10(v) + 1;
          },
        },
      },
      children: [
        {
          type: 'line',
          labels: [
            {
              text: 'value',
              formatter: (v) => {
                return Math.log10(v) + 1;
              },
              style: { dx: -10, dy: -12 },
            },
          ],
        },
        { type: 'point', style: { fill: 'white' }, tooltip: false },
      ]
  };

  return <DualAxes {...config} />;
};

createRoot(document.getElementById('container')).render(<Demo />);

log

概述

使用方式

选项

示例

格式化转化为 linear

格式化转化为 `linear`