Как интерфейс Ant Financial в 9102 создавал диаграммы?

Открытый исходный код

Я думаю, что у многих разработчиков бывали моменты, когда они бесились от диаграмм: они находились под большим бизнес-давлением, хотели быстро загрузить диаграмму, и после долгого метания она получалась, но она была уродлива и не могла быть демонстрация выглядела очень красиво, но она сразу же изменилась, когда ее заменили реальными данными. Станьте шоу для покупателей... Долгое время эти проблемы преследовали и интерфейс Ant. Почему так сложно написать облегченную схему?


Чтобы сделать процесс разработки диаграмм проще и приятнее, команда Ant Financial Visualization Team извлекла набор общих статистических данных, основанных на бизнес-сценариях и требованиях к диаграммам, извлеченным из более чем 20 000 бизнес-систем внутри и за пределами экономики Али, а также среднесуточных данных. из десятков миллионов УФ продуктов.Библиотека карт —G2Plot.


При этом повседневная жизнь интерфейса Ant Financial с использованием графиков выглядит следующим образом:

Front-end little K получил сегодня относительно жесткое бизнес-требование — быстро построить в системе панель для отображения продаж определенного товара с диаграммой. Xiao K и PD через некоторое время решили использоватьG2PlotСравните классические области, гистограмму и кольцевую диаграмму.


Красивая и интуитивно понятная диаграмма с областями

Диаграмма с областями — это первая диаграмма, которую К. составит и будет использовать.Диаграмма с областями с накоплениемчтобы показать временной тренд нескольких индикаторов.


Step1: ввести тип диаграммы

import { StackArea } from '@antv/g2plot';


Step2: подготовить данные

Формат источника данных G2Plot — массив JSON, а каждый элемент массива — стандартный объект JSON.

Данные ниже описывают квартальные продажи для каждого региона с 2016 по 2018 год. Пространство дисплея ограничено, и только одна четверть используется в качестве примера для отображения образцов данных.

const data = [
  { time: '2018季1', area: '东北', value: 190567 },
  { time: '2018季1', area: '华北', value: 80122 },
  { time: '2018季1', area: '华东', value: 223720 },
  { time: '2018季1', area: '西北', value: 157845 },
  { time: '2018季1', area: '中南', value: 60343 },
  { time: '2018季1', area: '西南', value: 98810 },
];


Step3: генерировать графикиПодключите источник данных, используйте поле «время» в данных в качестве оси X, поле «значение» в качестве оси Y, а также сгруппируйте и сложите данные по полю «площадь».

const area = new StackArea(
  document.getElementById('area-container'), // 获取图表容器
  {
    data,
    xField: 'time',
    yField: 'value',
    stackField: 'area'
  } // 图表配置项
);
area.render();


Done!   Всего 7 строк кода! Благодаря мощной системе проектирования AntV вы можете видеть, что качество отображаемых диаграмм по умолчанию довольно высокое.


Однако Xiao K — фронтенд, стремящийся к совершенству, и ему приходится дополнительно оптимизировать некоторые детали графика:

Шаг 4: добавьте заголовок

добавить в диаграммуназвание и описаниеЭто может помочь пользователям получить информацию о предмете, которая будет выражена диаграммой более интуитивно.

const area = new StackArea(document.getElementById('area-container'), {
  title: {
    visible: true,
    text: '地区销售趋势',
  },
  data,
  xField: 'time',
  yField: 'value',
  stackField: 'area'
});
area.render();


step5: Оптимизация оси координат

Когда работа была завершена, PD и дизайнер вместе сказали, что им еще есть что сказать. Оба они посчитали, что ось Y графика имеет место для оптимизации: дизайнер посчитал, что шкалы оси Y слишком плотные, а четыре шкалы визуально красивее, а PD посчитал, что метки оси Y -ось отображались в тысячных долях стандарта. Столкнувшись с этими требованиями, Сяо Кей сказал, что он эмоционально стабилен.

const area = new StackArea(document.getElementById('area-container'), {
  title: {
    visible: true,
    text: '地区销售趋势',
  },
  data,
  xField: 'time',
  yField: 'value',
  stackField: 'area',
  yAxis: {
    tickCount: 4,
    label: {
      formatter: (v) => {
        return Math.floor(v / 1000) + 'k';
      },
    },
  },
});
area.render();


Готово, для простого создания диаграмм с областями с накоплением требуется менее 20 строк кода.


Краткая гистограмма

Вторая диаграмма, которую нужно сделать следующей, этоСтолбчатая диаграмма с накоплением, который будет использоваться для сравнения продаж каждой категории продуктов в разных регионах. Предварительные шаги для создания диаграмм такие же, как и для диаграмм с областями с накоплением. Давайте перейдем непосредственно к основной ссылке:


Введите тип диаграммы:

import { StackBar } from '@antv/g2plot';


Создать диаграмму: смонтируйте источник данных, настройте заголовок, укажите поле «количество» в данных в качестве оси X, поле «площадь» в качестве оси Y и поле «кат» для стека. Некоторые мелкие детали, которые влияют на работу, были сделаны по умолчанию: автоматическое скрытие графической метки, когда места на дисплее недостаточно, автоматическая настройка цвета шрифта в соответствии с цветом фона для обеспечения удобочитаемости и т. д.

const bar = new StackBar(document.getElementById('bar-container'), {
  data,
  xField: 'count',
  yField: 'area',
  stackField: 'cat',
});
bar.render();



Изменить образцы:

Дизайнер считает, что эта диаграмма сравнивает данные категории, а не данные региона, поэтому она не должна использовать ту же цветовую палитру, что и диаграмма с накоплением областей. Нет проблем, менять образцы тоже легко:

color: ['#945fb9', '#1e9493', '#ff9845']



Гибкая и яркая кольцевая диаграмма

Кольцевая диаграммаНа этот раз это последний график, созданный Сяо К. Его преимуществами являются полая часть в центре и карта-индикатор, которая может взаимодействовать с графикой.


Введите тип диаграммы:

import { Ring } from '@antv/g2plot';


Создайте график:Поле «счет» в указанных данных определяет размер среза кольцевого графика, а поле «площадь» определяет цвет срезов.

const ring = new Ring(document.getElementById('ring-container'), {
  data,
  angleField: 'bill',
  colorField: 'area',
});




Добавьте индикаторную карту в центр кольцевой диаграммы:

Элемент конфигурации triggerOn определяет, как карточка индикатора связана с графиком.

statistic:{
  visible: true,
    triggerOn:'mouseenter'
  }
});






На этом панель диаграммы Xiao K завершена, используйтеG2Plotтолько что использовалМенее 50 строк кода. Разве не было бы неплохо сэкономить время, чтобы чему-то научиться, поиграть в игру и потискать кошку?

G2PlotОн постоянно совершенствуется с открытым исходным кодом.Помимо обслуживания многих предприятий Ant Financial, я надеюсь, что эта библиотека диаграмм, которая была отшлифована и улучшена сценариями корпоративного уровня, может помочь большему количеству людей решить болевые точки создания графики.


наконец

оG2PlotДля получения более подробной технической информации и подробного прогресса, пожалуйста, следите за нами по следующим каналам👇. Вы также можете дать небольшую звезду, чтобы больше людей могли увидеть этот проект с открытым исходным кодом:


Категории