threshold

查看 Markdown编辑此页

概述

threshold（阈值）比例尺属于离散化比例尺，用于将连续的数值型定义域按照指定的阈值分割成若干区间，并将每个区间映射到离散的值域中的一个值。常用于将连续数据分组、分档、分级显示。

与 quantize 比例尺类似，threshold 也是将连续数据映射为离散值，但不同的是：

threshold 比例尺需要手动指定分割点（阈值）
quantize 比例尺会根据数据域和值域的数量自动计算等宽的区间

与 quantile 比例尺的区别在于：

quantile 比例尺基于数据分布的分位数进行分段，确保每个区间包含相同数量的数据点
threshold 比例尺基于手动指定分割点分段，不考虑数据分布

映射效果

使用threshold

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

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

chart.options({
  type: 'view',
  autoFit: true,
  data: [
    { 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 },
  ],
  encode: { x: 'year', y: 'value' },
  scale: {
    y: {
      type: 'threshold',
      range: [1, 0.5, 0],
    },
  },
  children: [
    { type: 'line', labels: [{ text: 'value', style: { dx: -10, dy: -12 } }] },
    { type: 'point', style: { fill: 'white' }, tooltip: false },
  ],
});

chart.render();

不使用threshold

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

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

chart.options({
  type: 'view',
  autoFit: true,
  data: [
    { 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 },
  ],
  encode: { x: 'year', y: 'value' },
  scale: { x: { range: [0, 1] }, y: { domainMin: 0, nice: true } },
  children: [
    { type: 'line', labels: [{ text: 'value', style: { dx: -10, dy: -12 } }] },
    { type: 'point', style: { fill: 'white' }, tooltip: false },
  ],
});

chart.render();

适用场景

连续型数据需要分段归类时（如分档、评级、分区间着色等）
需要将数值型数据离散化为有限个类别

配置项

属性	描述	类型	默认值	必选
type	比例尺类型, 需为’threshold’	`string`	`'threshold'`	✓
domain	定义域阈值数组	`number[]`	`[0.5]`
range	值域数组+1	`any[]`	`[0, 1]`
unknown	输入为 `undefined`、`NaN`、`null` 时返回的值	`any`	`undefined`

示例

基本用法

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

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

chart.options({
  type: 'view',
  autoFit: true,
  data: [
    { 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 },
  ],
  encode: { x: 'year', y: 'value' },
  scale: {
    y: {
      type: 'threshold',
      range: [1, 0.5, 0],
    },
  },
  children: [
    { type: 'line', labels: [{ text: 'value', style: { dx: -10, dy: -12 } }] },
    { type: 'point', style: { fill: 'white' }, tooltip: false },
  ],
});

chart.render();

阀值折线图

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

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

chart.options({
  type: 'line',
  autoFit: true,
  data: [
    { date: '2011-10-01T00:00:00.000Z', value: 62.7 },
    { date: '2011-10-02T00:00:00.000Z', value: 59.9 },
    { date: '2011-10-03T00:00:00.000Z', value: 59.1 },
    { date: '2011-10-04T00:00:00.000Z', value: 58.8 },
    { date: '2011-10-05T00:00:00.000Z', value: 58.7 },
    { date: '2011-10-06T00:00:00.000Z', value: 57 },
    { date: '2011-10-07T00:00:00.000Z', value: 56.7 },
    { date: '2011-10-08T00:00:00.000Z', value: 56.8 },
    { date: '2011-10-09T00:00:00.000Z', value: 56.7 },
    { date: '2011-10-10T00:00:00.000Z', value: 60.1 },
    { date: '2011-10-11T00:00:00.000Z', value: 61.1 },
    { date: '2011-10-12T00:00:00.000Z', value: 61.5 },
    { date: '2011-10-13T00:00:00.000Z', value: 64.3 },
    { date: '2011-10-14T00:00:00.000Z', value: 67.1 },
    { date: '2011-10-15T00:00:00.000Z', value: 64.6 },
    { date: '2011-10-16T00:00:00.000Z', value: 61.6 },
    { date: '2011-10-17T00:00:00.000Z', value: 61.1 },
    { date: '2011-10-18T00:00:00.000Z', value: 59.2 },
    { date: '2011-10-19T00:00:00.000Z', value: 58.9 },
    { date: '2011-10-20T00:00:00.000Z', value: 57.2 },
    { date: '2011-10-21T00:00:00.000Z', value: 56.4 },
    { date: '2011-10-22T00:00:00.000Z', value: 60.7 },
    { date: '2011-10-23T00:00:00.000Z', value: 65.1 },
    { date: '2011-10-24T00:00:00.000Z', value: 60.9 },
    { date: '2011-10-25T00:00:00.000Z', value: 56.1 },
    { date: '2011-10-26T00:00:00.000Z', value: 54.6 },
    { date: '2011-10-27T00:00:00.000Z', value: 56.1 },
    { date: '2011-10-28T00:00:00.000Z', value: 58.1 },
    { date: '2011-10-29T00:00:00.000Z', value: 57.5 },
    { date: '2011-10-30T00:00:00.000Z', value: 57.7 },
    { date: '2011-10-31T00:00:00.000Z', value: 55.1 },
    { date: '2011-11-01T00:00:00.000Z', value: 57.9 },
    { date: '2011-11-02T00:00:00.000Z', value: 64.6 },
    { date: '2011-11-03T00:00:00.000Z', value: 56.2 },
    { date: '2011-11-04T00:00:00.000Z', value: 50.5 },
    { date: '2011-11-05T00:00:00.000Z', value: 51.3 },
    { date: '2011-11-06T00:00:00.000Z', value: 52.6 },
    { date: '2011-11-07T00:00:00.000Z', value: 51.4 },
    { date: '2011-11-08T00:00:00.000Z', value: 50.6 },
    { date: '2011-11-09T00:00:00.000Z', value: 54.6 },
    { date: '2011-11-10T00:00:00.000Z', value: 55.6 },
    { date: '2011-11-11T00:00:00.000Z', value: 53.9 },
    { date: '2011-11-12T00:00:00.000Z', value: 54 },
    { date: '2011-11-13T00:00:00.000Z', value: 53.8 },
    { date: '2011-11-14T00:00:00.000Z', value: 53.5 },
    { date: '2011-11-15T00:00:00.000Z', value: 53.4 },
    { date: '2011-11-16T00:00:00.000Z', value: 52.2 },
    { date: '2011-11-17T00:00:00.000Z', value: 52.7 },
    { date: '2011-11-18T00:00:00.000Z', value: 53.1 },
    { date: '2011-11-19T00:00:00.000Z', value: 49 },
    { date: '2011-11-20T00:00:00.000Z', value: 50.4 },
    { date: '2011-11-21T00:00:00.000Z', value: 51.1 },
    { date: '2011-11-22T00:00:00.000Z', value: 52.3 },
    { date: '2011-11-23T00:00:00.000Z', value: 54.6 },
    { date: '2011-11-24T00:00:00.000Z', value: 55.1 },
    { date: '2011-11-25T00:00:00.000Z', value: 51.5 },
    { date: '2011-11-26T00:00:00.000Z', value: 53.6 },
    { date: '2011-11-27T00:00:00.000Z', value: 52.3 },
    { date: '2011-11-28T00:00:00.000Z', value: 51 },
    { date: '2011-11-29T00:00:00.000Z', value: 49.5 },
    { date: '2011-11-30T00:00:00.000Z', value: 49.8 },
    { date: '2011-12-01T00:00:00.000Z', value: 60.4 },
    { date: '2011-12-02T00:00:00.000Z', value: 62.2 },
    { date: '2011-12-03T00:00:00.000Z', value: 58.3 },
    { date: '2011-12-04T00:00:00.000Z', value: 52.7 },
    { date: '2011-12-05T00:00:00.000Z', value: 51.5 },
    { date: '2011-12-06T00:00:00.000Z', value: 49.9 },
    { date: '2011-12-07T00:00:00.000Z', value: 48.6 },
    { date: '2011-12-08T00:00:00.000Z', value: 46.4 },
    { date: '2011-12-09T00:00:00.000Z', value: 49.8 },
    { date: '2011-12-10T00:00:00.000Z', value: 52.1 },
    { date: '2011-12-11T00:00:00.000Z', value: 48.8 },
    { date: '2011-12-12T00:00:00.000Z', value: 47.4 },
    { date: '2011-12-13T00:00:00.000Z', value: 47.2 },
    { date: '2011-12-14T00:00:00.000Z', value: 46.1 },
    { date: '2011-12-15T00:00:00.000Z', value: 48.8 },
    { date: '2011-12-16T00:00:00.000Z', value: 47.9 },
    { date: '2011-12-17T00:00:00.000Z', value: 49.8 },
    { date: '2011-12-18T00:00:00.000Z', value: 49.1 },
    { date: '2011-12-19T00:00:00.000Z', value: 48.3 },
    { date: '2011-12-20T00:00:00.000Z', value: 49.3 },
    { date: '2011-12-21T00:00:00.000Z', value: 48.4 },
    { date: '2011-12-22T00:00:00.000Z', value: 53.3 },
    { date: '2011-12-23T00:00:00.000Z', value: 47.5 },
    { date: '2011-12-24T00:00:00.000Z', value: 47.9 },
    { date: '2011-12-25T00:00:00.000Z', value: 48.9 },
    { date: '2011-12-26T00:00:00.000Z', value: 45.9 },
    { date: '2011-12-27T00:00:00.000Z', value: 47.2 },
    { date: '2011-12-28T00:00:00.000Z', value: 48.9 },
    { date: '2011-12-29T00:00:00.000Z', value: 50.9 },
    { date: '2011-12-30T00:00:00.000Z', value: 52.9 },
    { date: '2011-12-31T00:00:00.000Z', value: 50.1 },
    { date: '2012-01-01T00:00:00.000Z', value: 53.9 },
    { date: '2012-01-02T00:00:00.000Z', value: 53.1 },
    { date: '2012-01-03T00:00:00.000Z', value: 49.7 },
    { date: '2012-01-04T00:00:00.000Z', value: 52.7 },
    { date: '2012-01-05T00:00:00.000Z', value: 52.6 },
    { date: '2012-01-06T00:00:00.000Z', value: 49 },
    { date: '2012-01-07T00:00:00.000Z', value: 51 },
    { date: '2012-01-08T00:00:00.000Z', value: 56.8 },
    { date: '2012-01-09T00:00:00.000Z', value: 52.3 },
    { date: '2012-01-10T00:00:00.000Z', value: 51.6 },
    { date: '2012-01-11T00:00:00.000Z', value: 49.8 },
    { date: '2012-01-12T00:00:00.000Z', value: 51.9 },
    { date: '2012-01-13T00:00:00.000Z', value: 53.7 },
    { date: '2012-01-14T00:00:00.000Z', value: 52.9 },
    { date: '2012-01-15T00:00:00.000Z', value: 49.7 },
    { date: '2012-01-16T00:00:00.000Z', value: 45.3 },
    { date: '2012-01-17T00:00:00.000Z', value: 43.6 },
    { date: '2012-01-18T00:00:00.000Z', value: 45 },
    { date: '2012-01-19T00:00:00.000Z', value: 47.3 },
    { date: '2012-01-20T00:00:00.000Z', value: 51.4 },
    { date: '2012-01-21T00:00:00.000Z', value: 53.7 },
    { date: '2012-01-22T00:00:00.000Z', value: 48.3 },
    { date: '2012-01-23T00:00:00.000Z', value: 52.9 },
    { date: '2012-01-24T00:00:00.000Z', value: 49.1 },
    { date: '2012-01-25T00:00:00.000Z', value: 52.1 },
    { date: '2012-01-26T00:00:00.000Z', value: 53.6 },
    { date: '2012-01-27T00:00:00.000Z', value: 50.4 },
    { date: '2012-01-28T00:00:00.000Z', value: 50.3 },
    { date: '2012-01-29T00:00:00.000Z', value: 53.8 },
    { date: '2012-01-30T00:00:00.000Z', value: 51.9 },
    { date: '2012-01-31T00:00:00.000Z', value: 50 },
    { date: '2012-02-01T00:00:00.000Z', value: 50 },
    { date: '2012-02-02T00:00:00.000Z', value: 51.3 },
    { date: '2012-02-03T00:00:00.000Z', value: 51.5 },
    { date: '2012-02-04T00:00:00.000Z', value: 52 },
    { date: '2012-02-05T00:00:00.000Z', value: 53.8 },
    { date: '2012-02-06T00:00:00.000Z', value: 54.6 },
    { date: '2012-02-07T00:00:00.000Z', value: 54.3 },
    { date: '2012-02-08T00:00:00.000Z', value: 51.9 },
    { date: '2012-02-09T00:00:00.000Z', value: 53.8 },
    { date: '2012-02-10T00:00:00.000Z', value: 53.9 },
    { date: '2012-02-11T00:00:00.000Z', value: 52.3 },
    { date: '2012-02-12T00:00:00.000Z', value: 50.1 },
    { date: '2012-02-13T00:00:00.000Z', value: 49.5 },
    { date: '2012-02-14T00:00:00.000Z', value: 48.6 },
    { date: '2012-02-15T00:00:00.000Z', value: 49.9 },
    { date: '2012-02-16T00:00:00.000Z', value: 52.4 },
    { date: '2012-02-17T00:00:00.000Z', value: 49.9 },
    { date: '2012-02-18T00:00:00.000Z', value: 51.6 },
    { date: '2012-02-19T00:00:00.000Z', value: 47.8 },
    { date: '2012-02-20T00:00:00.000Z', value: 48.7 },
    { date: '2012-02-21T00:00:00.000Z', value: 49.7 },
    { date: '2012-02-22T00:00:00.000Z', value: 53.4 },
    { date: '2012-02-23T00:00:00.000Z', value: 54.1 },
    { date: '2012-02-24T00:00:00.000Z', value: 55.9 },
    { date: '2012-02-25T00:00:00.000Z', value: 51.7 },
    { date: '2012-02-26T00:00:00.000Z', value: 47.7 },
    { date: '2012-02-27T00:00:00.000Z', value: 45.4 },
    { date: '2012-02-28T00:00:00.000Z', value: 47 },
    { date: '2012-02-29T00:00:00.000Z', value: 49.8 },
    { date: '2012-03-01T00:00:00.000Z', value: 48.9 },
    { date: '2012-03-02T00:00:00.000Z', value: 48.1 },
    { date: '2012-03-03T00:00:00.000Z', value: 50.7 },
    { date: '2012-03-04T00:00:00.000Z', value: 55 },
    { date: '2012-03-05T00:00:00.000Z', value: 48.8 },
    { date: '2012-03-06T00:00:00.000Z', value: 48.4 },
    { date: '2012-03-07T00:00:00.000Z', value: 49.9 },
    { date: '2012-03-08T00:00:00.000Z', value: 49.2 },
    { date: '2012-03-09T00:00:00.000Z', value: 51.7 },
    { date: '2012-03-10T00:00:00.000Z', value: 49.3 },
    { date: '2012-03-11T00:00:00.000Z', value: 50 },
    { date: '2012-03-12T00:00:00.000Z', value: 48.6 },
    { date: '2012-03-13T00:00:00.000Z', value: 53.9 },
    { date: '2012-03-14T00:00:00.000Z', value: 55.2 },
    { date: '2012-03-15T00:00:00.000Z', value: 55.9 },
    { date: '2012-03-16T00:00:00.000Z', value: 54.6 },
    { date: '2012-03-17T00:00:00.000Z', value: 48.2 },
    { date: '2012-03-18T00:00:00.000Z', value: 47.1 },
    { date: '2012-03-19T00:00:00.000Z', value: 45.8 },
    { date: '2012-03-20T00:00:00.000Z', value: 49.7 },
    { date: '2012-03-21T00:00:00.000Z', value: 51.4 },
    { date: '2012-03-22T00:00:00.000Z', value: 51.4 },
    { date: '2012-03-23T00:00:00.000Z', value: 48.4 },
    { date: '2012-03-24T00:00:00.000Z', value: 49 },
    { date: '2012-03-25T00:00:00.000Z', value: 46.4 },
    { date: '2012-03-26T00:00:00.000Z', value: 49.7 },
    { date: '2012-03-27T00:00:00.000Z', value: 54.1 },
    { date: '2012-03-28T00:00:00.000Z', value: 54.6 },
    { date: '2012-03-29T00:00:00.000Z', value: 52.3 },
    { date: '2012-03-30T00:00:00.000Z', value: 54.5 },
    { date: '2012-03-31T00:00:00.000Z', value: 56.2 },
    { date: '2012-04-01T00:00:00.000Z', value: 51.1 },
    { date: '2012-04-02T00:00:00.000Z', value: 50.5 },
    { date: '2012-04-03T00:00:00.000Z', value: 52.2 },
    { date: '2012-04-04T00:00:00.000Z', value: 50.6 },
    { date: '2012-04-05T00:00:00.000Z', value: 47.9 },
    { date: '2012-04-06T00:00:00.000Z', value: 47.4 },
    { date: '2012-04-07T00:00:00.000Z', value: 49.4 },
    { date: '2012-04-08T00:00:00.000Z', value: 50 },
    { date: '2012-04-09T00:00:00.000Z', value: 51.3 },
    { date: '2012-04-10T00:00:00.000Z', value: 53.8 },
    { date: '2012-04-11T00:00:00.000Z', value: 52.9 },
    { date: '2012-04-12T00:00:00.000Z', value: 53.9 },
    { date: '2012-04-13T00:00:00.000Z', value: 50.2 },
    { date: '2012-04-14T00:00:00.000Z', value: 50.9 },
    { date: '2012-04-15T00:00:00.000Z', value: 51.5 },
    { date: '2012-04-16T00:00:00.000Z', value: 51.9 },
    { date: '2012-04-17T00:00:00.000Z', value: 53.2 },
    { date: '2012-04-18T00:00:00.000Z', value: 53 },
    { date: '2012-04-19T00:00:00.000Z', value: 55.1 },
    { date: '2012-04-20T00:00:00.000Z', value: 55.8 },
    { date: '2012-04-21T00:00:00.000Z', value: 58 },
    { date: '2012-04-22T00:00:00.000Z', value: 52.8 },
    { date: '2012-04-23T00:00:00.000Z', value: 55.1 },
    { date: '2012-04-24T00:00:00.000Z', value: 57.9 },
    { date: '2012-04-25T00:00:00.000Z', value: 57.5 },
    { date: '2012-04-26T00:00:00.000Z', value: 55.3 },
    { date: '2012-04-27T00:00:00.000Z', value: 53.5 },
    { date: '2012-04-28T00:00:00.000Z', value: 54.7 },
    { date: '2012-04-29T00:00:00.000Z', value: 54 },
    { date: '2012-04-30T00:00:00.000Z', value: 53.4 },
    { date: '2012-05-01T00:00:00.000Z', value: 52.7 },
    { date: '2012-05-02T00:00:00.000Z', value: 50.7 },
    { date: '2012-05-03T00:00:00.000Z', value: 52.6 },
    { date: '2012-05-04T00:00:00.000Z', value: 53.4 },
    { date: '2012-05-05T00:00:00.000Z', value: 53.1 },
    { date: '2012-05-06T00:00:00.000Z', value: 56.5 },
    { date: '2012-05-07T00:00:00.000Z', value: 55.3 },
    { date: '2012-05-08T00:00:00.000Z', value: 52 },
    { date: '2012-05-09T00:00:00.000Z', value: 52.4 },
    { date: '2012-05-10T00:00:00.000Z', value: 53.4 },
    { date: '2012-05-11T00:00:00.000Z', value: 53.1 },
    { date: '2012-05-12T00:00:00.000Z', value: 49.9 },
    { date: '2012-05-13T00:00:00.000Z', value: 52 },
    { date: '2012-05-14T00:00:00.000Z', value: 56 },
    { date: '2012-05-15T00:00:00.000Z', value: 53 },
    { date: '2012-05-16T00:00:00.000Z', value: 51 },
    { date: '2012-05-17T00:00:00.000Z', value: 51.4 },
    { date: '2012-05-18T00:00:00.000Z', value: 52.2 },
    { date: '2012-05-19T00:00:00.000Z', value: 52.4 },
    { date: '2012-05-20T00:00:00.000Z', value: 54.5 },
    { date: '2012-05-21T00:00:00.000Z', value: 52.8 },
    { date: '2012-05-22T00:00:00.000Z', value: 53.9 },
    { date: '2012-05-23T00:00:00.000Z', value: 56.5 },
    { date: '2012-05-24T00:00:00.000Z', value: 54.7 },
    { date: '2012-05-25T00:00:00.000Z', value: 52.5 },
    { date: '2012-05-26T00:00:00.000Z', value: 52.1 },
    { date: '2012-05-27T00:00:00.000Z', value: 52.2 },
    { date: '2012-05-28T00:00:00.000Z', value: 52.9 },
    { date: '2012-05-29T00:00:00.000Z', value: 52.1 },
    { date: '2012-05-30T00:00:00.000Z', value: 52.1 },
    { date: '2012-05-31T00:00:00.000Z', value: 53.3 },
    { date: '2012-06-01T00:00:00.000Z', value: 54.8 },
    { date: '2012-06-02T00:00:00.000Z', value: 54 },
    { date: '2012-06-03T00:00:00.000Z', value: 52.3 },
    { date: '2012-06-04T00:00:00.000Z', value: 55.3 },
    { date: '2012-06-05T00:00:00.000Z', value: 53.5 },
    { date: '2012-06-06T00:00:00.000Z', value: 54.1 },
    { date: '2012-06-07T00:00:00.000Z', value: 53.9 },
    { date: '2012-06-08T00:00:00.000Z', value: 54.4 },
    { date: '2012-06-09T00:00:00.000Z', value: 55 },
    { date: '2012-06-10T00:00:00.000Z', value: 60 },
    { date: '2012-06-11T00:00:00.000Z', value: 57.2 },
    { date: '2012-06-12T00:00:00.000Z', value: 55.1 },
    { date: '2012-06-13T00:00:00.000Z', value: 53.3 },
    { date: '2012-06-14T00:00:00.000Z', value: 53.4 },
    { date: '2012-06-15T00:00:00.000Z', value: 54.6 },
    { date: '2012-06-16T00:00:00.000Z', value: 57 },
    { date: '2012-06-17T00:00:00.000Z', value: 55.6 },
    { date: '2012-06-18T00:00:00.000Z', value: 52.5 },
    { date: '2012-06-19T00:00:00.000Z', value: 53.9 },
    { date: '2012-06-20T00:00:00.000Z', value: 55.3 },
    { date: '2012-06-21T00:00:00.000Z', value: 53.3 },
    { date: '2012-06-22T00:00:00.000Z', value: 54.1 },
    { date: '2012-06-23T00:00:00.000Z', value: 55.2 },
    { date: '2012-06-24T00:00:00.000Z', value: 55.8 },
    { date: '2012-06-25T00:00:00.000Z', value: 56.8 },
    { date: '2012-06-26T00:00:00.000Z', value: 57.5 },
    { date: '2012-06-27T00:00:00.000Z', value: 57.7 },
    { date: '2012-06-28T00:00:00.000Z', value: 56.6 },
    { date: '2012-06-29T00:00:00.000Z', value: 56.4 },
    { date: '2012-06-30T00:00:00.000Z', value: 58.4 },
    { date: '2012-07-01T00:00:00.000Z', value: 58.8 },
    { date: '2012-07-02T00:00:00.000Z', value: 56.4 },
    { date: '2012-07-03T00:00:00.000Z', value: 56.5 },
    { date: '2012-07-04T00:00:00.000Z', value: 55.8 },
    { date: '2012-07-05T00:00:00.000Z', value: 54.8 },
    { date: '2012-07-06T00:00:00.000Z', value: 54.9 },
    { date: '2012-07-07T00:00:00.000Z', value: 54.7 },
    { date: '2012-07-08T00:00:00.000Z', value: 52.8 },
    { date: '2012-07-09T00:00:00.000Z', value: 53.7 },
    { date: '2012-07-10T00:00:00.000Z', value: 53.1 },
    { date: '2012-07-11T00:00:00.000Z', value: 52.7 },
    { date: '2012-07-12T00:00:00.000Z', value: 52 },
    { date: '2012-07-13T00:00:00.000Z', value: 53.4 },
    { date: '2012-07-14T00:00:00.000Z', value: 54 },
    { date: '2012-07-15T00:00:00.000Z', value: 54 },
    { date: '2012-07-16T00:00:00.000Z', value: 54.5 },
    { date: '2012-07-17T00:00:00.000Z', value: 56.7 },
    { date: '2012-07-18T00:00:00.000Z', value: 57.5 },
    { date: '2012-07-19T00:00:00.000Z', value: 57.1 },
    { date: '2012-07-20T00:00:00.000Z', value: 58.1 },
    { date: '2012-07-21T00:00:00.000Z', value: 57.6 },
    { date: '2012-07-22T00:00:00.000Z', value: 56 },
    { date: '2012-07-23T00:00:00.000Z', value: 56.6 },
    { date: '2012-07-24T00:00:00.000Z', value: 57.8 },
    { date: '2012-07-25T00:00:00.000Z', value: 57.5 },
    { date: '2012-07-26T00:00:00.000Z', value: 56.4 },
    { date: '2012-07-27T00:00:00.000Z', value: 55.3 },
    { date: '2012-07-28T00:00:00.000Z', value: 55 },
    { date: '2012-07-29T00:00:00.000Z', value: 55.6 },
    { date: '2012-07-30T00:00:00.000Z', value: 55.6 },
    { date: '2012-07-31T00:00:00.000Z', value: 55.9 },
    { date: '2012-08-01T00:00:00.000Z', value: 55.4 },
    { date: '2012-08-02T00:00:00.000Z', value: 54.4 },
    { date: '2012-08-03T00:00:00.000Z', value: 53.7 },
    { date: '2012-08-04T00:00:00.000Z', value: 54.1 },
    { date: '2012-08-05T00:00:00.000Z', value: 57.8 },
    { date: '2012-08-06T00:00:00.000Z', value: 58.2 },
    { date: '2012-08-07T00:00:00.000Z', value: 58 },
    { date: '2012-08-08T00:00:00.000Z', value: 57 },
    { date: '2012-08-09T00:00:00.000Z', value: 55 },
    { date: '2012-08-10T00:00:00.000Z', value: 54.8 },
    { date: '2012-08-11T00:00:00.000Z', value: 53 },
    { date: '2012-08-12T00:00:00.000Z', value: 52.5 },
    { date: '2012-08-13T00:00:00.000Z', value: 53.3 },
    { date: '2012-08-14T00:00:00.000Z', value: 53.9 },
    { date: '2012-08-15T00:00:00.000Z', value: 56.2 },
    { date: '2012-08-16T00:00:00.000Z', value: 57.1 },
    { date: '2012-08-17T00:00:00.000Z', value: 55.3 },
    { date: '2012-08-18T00:00:00.000Z', value: 56.2 },
    { date: '2012-08-19T00:00:00.000Z', value: 54.3 },
    { date: '2012-08-20T00:00:00.000Z', value: 53.1 },
    { date: '2012-08-21T00:00:00.000Z', value: 53.4 },
    { date: '2012-08-22T00:00:00.000Z', value: 54.5 },
    { date: '2012-08-23T00:00:00.000Z', value: 55.7 },
    { date: '2012-08-24T00:00:00.000Z', value: 54.8 },
    { date: '2012-08-25T00:00:00.000Z', value: 53.8 },
    { date: '2012-08-26T00:00:00.000Z', value: 56.5 },
    { date: '2012-08-27T00:00:00.000Z', value: 58.3 },
    { date: '2012-08-28T00:00:00.000Z', value: 58.7 },
    { date: '2012-08-29T00:00:00.000Z', value: 57.5 },
    { date: '2012-08-30T00:00:00.000Z', value: 55.9 },
    { date: '2012-08-31T00:00:00.000Z', value: 55.4 },
    { date: '2012-09-01T00:00:00.000Z', value: 55.7 },
    { date: '2012-09-02T00:00:00.000Z', value: 53.1 },
    { date: '2012-09-03T00:00:00.000Z', value: 53.5 },
    { date: '2012-09-04T00:00:00.000Z', value: 52.5 },
    { date: '2012-09-05T00:00:00.000Z', value: 54.5 },
    { date: '2012-09-06T00:00:00.000Z', value: 56.3 },
    { date: '2012-09-07T00:00:00.000Z', value: 56.4 },
    { date: '2012-09-08T00:00:00.000Z', value: 56.5 },
    { date: '2012-09-09T00:00:00.000Z', value: 56.4 },
    { date: '2012-09-10T00:00:00.000Z', value: 55.4 },
    { date: '2012-09-11T00:00:00.000Z', value: 56.2 },
    { date: '2012-09-12T00:00:00.000Z', value: 55.7 },
    { date: '2012-09-13T00:00:00.000Z', value: 54.3 },
    { date: '2012-09-14T00:00:00.000Z', value: 55.2 },
    { date: '2012-09-15T00:00:00.000Z', value: 54.3 },
    { date: '2012-09-16T00:00:00.000Z', value: 52.9 },
    { date: '2012-09-17T00:00:00.000Z', value: 54.8 },
    { date: '2012-09-18T00:00:00.000Z', value: 54.8 },
    { date: '2012-09-19T00:00:00.000Z', value: 56.8 },
    { date: '2012-09-20T00:00:00.000Z', value: 55.4 },
    { date: '2012-09-21T00:00:00.000Z', value: 55.8 },
    { date: '2012-09-22T00:00:00.000Z', value: 55.9 },
    { date: '2012-09-23T00:00:00.000Z', value: 52.8 },
    { date: '2012-09-24T00:00:00.000Z', value: 54.5 },
    { date: '2012-09-25T00:00:00.000Z', value: 53.3 },
    { date: '2012-09-26T00:00:00.000Z', value: 53.6 },
    { date: '2012-09-27T00:00:00.000Z', value: 52.1 },
    { date: '2012-09-28T00:00:00.000Z', value: 52.6 },
    { date: '2012-09-29T00:00:00.000Z', value: 53.9 },
    { date: '2012-09-30T00:00:00.000Z', value: 55.1 },
  ],
  encode: {
    x: (d) => new Date(d.date),
    y: 'value',
    shape: 'hvh',
    color: 'value',
    series: () => undefined,
  },
  scale: {
    y: { nice: true },
    x: { utc: true },
    color: { type: 'threshold', domain: [53.55], range: ['black', 'red'] },
  },
  style: { gradient: 'y', lineWidth: 1.5, lineJoin: 'round' },
  axis: { x: { title: 'date' } },
});

chart.render();

柱状图

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

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

chart.options({
  type: 'interval',
  autoFit: true,
  height: 180,
  paddingTop: 0,
  paddingLeft: 60,
  paddingBottom: 0,
  data: {
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/antvdemo/assets/data/candle-sticks.json',
  },
  encode: {
    x: 'time',
    y: 'volumn',
    color: (d) => {
      const trend = Math.sign(d.start - d.end);
      return trend > 0 ? '下跌' : trend === 0 ? '不变' : '上涨';
    },
  },
  scale: {
    x: { compare: (a, b) => new Date(a).getTime() - new Date(b).getTime() },
    color: {
      type: 'threshold',
      domain: ['下跌', '不变', '上涨'],
      range: ['#4daf4a', '#999999', '#e41a1c'],
    },
  },
  axis: { x: false, y: { title: false } },
});
chart.render();