Библиотека диаграмм Alibaba Bizcharts официально с открытым исходным кодом

внешний интерфейс Алибаба React.js Открытый исходный код

написать впереди

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

В этой статье кратко представлена ​​библиотека диаграмм с открытым исходным кодом Alibaba.Bizcharts, в основном делится на следующие аспекты:

  1. его происхождение
  2. Для какого бизнес-сценария подходит?
  3. как использовать?
  4. будущее планирование

его происхождение?

В настоящее время большинство предприятий Alibaba используют технологический стек React на переднем крае, а в бизнес-сценариях часто возникают требования к рисованию диаграмм, поэтомуБиблиотека диаграмм на основе стека ReactЭто очень необходимо, и внутри Ali есть очень мощный базовый механизм построения графиков, такой как G2, поэтому вполне естественно сделать слой инкапсуляции поверх этого механизма, иBizchartsЭто пакет версии React, основанный на движке G2.

BizchartsДизайн синтаксиса очень подходит для использования React, и каждая часть диаграммы разделена на независимые классы React, такие как:<Tooltip />Представляет оперативную информацию,<Axis />Представляет ось координат. Все элементы конфигурации диаграммы являются реквизитами компонента.

BizchartsВ последней версии 3.x поддерживается отрисовка диаграмм в режимах Canvas и SVG. Только с точки зрения библиотеки диаграмм выбор Canvas и SVG имеет свои преимущества и недостатки.BizchartsОба метода поддерживаются и подходят для различных сложных бизнес-сценариев.

BizchartsПосле двух лет неоднократных доработок в нескольких бизнес-направлениях в нескольких отделах Alibaba в конце прошлого года он был открыт. За полгода с открытым исходным кодом было сделано много итеративной оптимизации, и теперь функции и производительность были значительно оптимизированы, и его настоятельно рекомендуется использовать в формальной среде.

Для какого бизнес-сценария подходит?

Внутренний бизнес Alibaba очень сложен: бизнес электронной коммерции, серверная система, бизнес с большим экраном и т. д. Эти предприятия имеют большое количество индивидуальных потребностей в диаграммах, которые не могут быть удовлетворены простыми линейными диаграммами и гистограммами. один из Bicharts.Features: Поддержка бесплатной настройки. В то же время вышеизложенное также показало, что более 95% бизнес-интерфейса Alibaba использует стек технологий React, поэтому в целом бизнес-сценарий, применимый к Bizcharts, — это «использование стека технологий React и потребность в диаграммах». рисунок». С этой точки зрения Bizcharts применим к широкому спектру бизнес-сценариев. По сравнению с хорошо инкапсулированной структурой построения диаграмм Echarts, Bizcharts может удовлетворить больше потребностей бизнеса в настройке.

как использовать?

БизчартсAPIСозданный специально для React, он похож на строительные блоки. Давайте возьмем базовую гистограмму в качестве примера, чтобы объяснить:

import React from 'react';
import ReactDOM from 'react-dom';
import { Chart, Geom, Axis, Tooltip, Legend, Coord } from 'bizcharts';

// 数据源
const data = [
  { genre: 'Sports', sold: 275, income: 2300 },
  { genre: 'Strategy', sold: 115, income: 667 },
  { genre: 'Action', sold: 120, income: 982 },
  { genre: 'Shooter', sold: 350, income: 5271 },
  { genre: 'Other', sold: 150, income: 3710 }
];

// 定义度量
const cols = {
  sold: { alias: '销售量' }, // 数据字段别名映射
  genre: { alias: '游戏种类' }
};

// 渲染图表
ReactDOM.render((
  <Chart width={600} height={400} data={data} scale={cols}>
    {/* X 轴 */}
    <Axis name="genre" />
    {/* Y 轴 */}
    <Axis name="sold" />
    <Legend position="top" dy={-20} />
    <Tooltip />
    <Geom type="interval" position="genre*sold" color="genre" />
  </Chart>
), document.getElementById('mountNode'));

Следующее изображение является результатом рендеринга приведенного выше фрагмента кода:

Каждая часть диаграммы является компонентом, и вы можете добавить то, что вам нужно, это очень удобно в использовании, и вам не нужно беспокоиться о том, что потребности продакт-менеджера будут выполнены.

будущее планирование

BizchartsОн поставляется с большим количествомDemo, который может соответствовать большинству общих сценариев использования.При его использовании вам нужно только заменить данные в демо-версии данными в вашем собственном бизнесе, но даже в этом случае он не может полностью охватить узкоспециализированные сценарии. Конечно, пользователи Bizcharts могут проверитьОфициальная документация по API веб-сайтаДля достижения спроса, но это незримо увеличивает стоимость обучения пользователя. Поскольку на всем веб-сайте может быть только простой график скидок, а времени очень мало, его нужно реализовать быстро.В настоящее время пользователям очень больно учиться использовать библиотеку классов/фреймворк.

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

напиши в конце

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

Категории