В последнее время библиотека диаграмм BizCharts с открытым исходным кодом от Alibaba основана на технологическом стеке React, и каждый элемент диаграммы имеет форму компонента, что близко к характеристикам использования React. В то же время пакет BizCharts основан на G2, и Bizcharts также наследует функции, связанные с G2. В настоящее время компания использует библиотеку диаграмм ECharts единообразно. Ниже будут проанализированы и сравнены три библиотеки диаграмм.
BizCharts
Адрес документа:BizCharts
1. Установка
Импортировано через npm/yarn
npm install bizcharts --save
yarn add bizcharts --save
2. Цитирование
После успешной установки на него можно сослаться с помощью import или require.
пример:
import { Chart, Geom, Axis, Tooltip, Legend } from 'bizcharts';
import chartConfig from './assets/js/chartConfig';
<div className="App">
<Chart width={600} height={400} data={chartConfig.chartData} scale={chartConfig.cols}>
<Axis name="genre" title={chartConfig.title}/>
<Axis name="sold" title={chartConfig.title}/>
<Legend position="top" dy={-20} />
<Tooltip />
<Geom type="interval" position="genre*sold" color="genre" />
</Chart>
</div>
В этом примере конфигурация данных диаграммы хранится отдельно в других файлах js, чтобы страница не была слишком сложной.
module.exports = {
chartData : [
{ 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 }
],
// 定义度量
cols : {
sold: { alias: '销售量' }, // 数据字段别名映射
genre: { alias: '游戏种类' }
},
title : {
autoRotate: true, // 是否需要自动旋转，默认为 true
textStyle: {
fontSize: '12',
textAlign: 'center',
fill: '#999',
fontWeight: 'bold',
rotate: 30
}, // 坐标轴文本属性配置
position:'center', // 标题的位置，**新增**
}
}
Предварительный просмотр эффекта:
3. Набор данных
В BizCharts данные значков могут обрабатываться через набор данных (модуль обработки данных), который унаследован от G2 и будет подробно проанализирован ниже.
G2
BizCharts разработан на основе G2, и G2 также практикуется в процессе исследования BizCharts.
1. Установка
Как и BizCharts, его можно импортировать через npm/yarn.
npm install @antv/g2 --save
yarn add @antv/g2 --save
В отличие от BizCharts, данные инициализации G2 не вводятся в виде компонентов, а должны быть получены для инициализации диаграммы под определенным DOM. После получения уникального идентификатора атрибута DOM инициализируйте его с помощью chart().
2. Цитирование
Пример:
import React from 'react';
import G2 from '@antv/g2';
class g2 extends React.Component {constructor(props) {
super(props);
this.state = {
data :[
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 }
]
};
}
componentDidMount() {
const chart = new G2.Chart({
container: 'c1', // 指定图表容器 ID
width: 600, // 指定图表宽度
height: 300 // 指定图表高度
});
chart.source(this.state.data);
chart.interval().position('genre*sold').color('genre');
chart.render();
}
render() {
return (
<div id="c1" className="charts">
</div>
);
}
}
export default g2;
Изображение эффекта:
3. Набор данных
DataSet в основном имеет две функции: анализ данных (соединитель) и обработка данных (преобразование).
Официальные документы описывают более подробно, вы можете обратиться к классификации официального сайта:
Анализ исходных данных, конвертация csv, dsv, geojson в стандартный JSON, просмотрConnectorОбработка данных, включая фильтрацию, сопоставление, кратность (дополнение данных) и другие операции, просмотрTransformСтатистические функции, сводная статистика, проценты, запечатывание коробок и другие статистические функции см.TransformСпециальная обработка данных, включая обработку данных географических данных, древовидной карты, диаграммы Санки и облака слов, см.Transform
// step1 创建 dataset 指定状态量
const ds = new DataSet({
state: {
year: '2010'
}
});
// step2 创建 DataView
const dv = ds.createView().source(data);
dv.transform({
type: 'filter',
callback(row) {
return row.year === ds.state.year;
}
});
// step3 引用 DataView
chart.source(dv);
// step4 更新状态量
ds.setState('year', '2012');
Далее для анализа используются примеры, приведенные в документации официального сайта.
Пример 1
Данные в этой таблице представляют собой население разных возрастных групп в каждом штате США.Данные таблицы хранятся в файле типа CVS.Ссылка на данные (данные типа json в этой ссылке)
| State | младше 5 лет | от 5 до 13 лет | от 14 до 17 лет | от 18 до 24 лет | от 25 до 44 лет | от 45 до 64 лет | 65 лет и старше |
|---|---|---|---|---|---|---|---|
| WY | 38253 | 60890 | 29314 | 53980 | 137338 | 147279 | 65614 |
| DC | 36352 | 50439 | 25225 | 75569 | 193557 | 140043 | 70648 |
| VT | 32635 | 62538 | 33757 | 61679 | 155419 | 188593 | 86649 |
| ... | ... | ... | ... | ... | ... | ... | ... |
Инициализировать модуль обработки данных
import DataSet from '@antv/data-set';
const ds = new DataSet({
//state表示创建dataSet的状态量，可以不进行设置
state: {
currentState: 'WY'
}
});
const dvForAll = ds
// 在 DataSet 实例下创建名为 populationByAge 的数据视图
.createView('populationByAge')
// source初始化图表数据，data可为http请求返回的数据结果
.source(data, {
type: 'csv', // 使用 CSV 类型的 Connector 装载 data，如果是json类型的数据，可以不进行设置，默认为json类型
});
/**
trnasform对数据进行加工处理，可通过type设置加工类型，具体参考上文api文档
加工过后数据格式为
[
{state:'WY',key:'小于5岁'，value:38253},
{state:'WY',key:'5至13岁'，value:60890},
]
*/
dvForAll.transform({
type: 'fold',
fields: [ '小于5岁','5至13岁','14至17岁','18至24岁','25至44岁','45至64岁','65岁及以上' ],
key: 'age',
value: 'population'
});
//其余transform操作
const dvForOneState = ds
.createView('populationOfOneState')
.source(dvForAll); // 从全量数据继承，写法也可以是.source('populationByAge')
dvForOneState
.transform({ // 过滤数据，筛选出state符合的地区数据
type: 'filter',
callback(row) {
return row.state === ds.state.currentState;
}
})
.transform({
type: 'percent',
field: 'population',
dimension: 'age',
as: 'percent'
});
Рисование с помощью G2Документация по G2-chart API
import G2 from '@antv/g2';
// 初始化图表，id指定了图表要插入的dom，其他属性设置了图表所占的宽高
const c1 = new G2.Chart({
id: 'c1',
forceFit: true,
height: 400,
});
// chart初始化加工过的数据dvForAll
c1.source(dvForAll);
// 配置图表图例
c1.legend({
position: 'top',
});
// 设置坐标轴配置，该方法返回 chart 对象，以下代码表示将坐标轴属性为人口的数据，转换为M为单位的数据
c1.axis('population', {
label: {
formatter: val => {
return val / 1000000 + 'M';
}
}
});
c1.intervalStack()
.position('state*population')
.color('age')
.select(true, {
mode: 'single',
style: {
stroke: 'red',
strokeWidth: 5
}
});
//当tooltip发生变化的时候，触发事件,修改ds的state状态量，一旦状态量改变，就会触发图表的更新，所以c2饼图会触发改变
c1.on('tooltip:change', function(evt) {
const items = evt.items || [];
if (items[0]) {
//修改的currentState为鼠标所触及的tooltip的地区
ds.setState('currentState', items[0].title);
}
});
// 绘制饼图
const c2 = new G2.Chart({
id: 'c2',
forceFit: true,
height: 300,
padding: 0,
});
c2.source(dvForOneState);
c2.coord('theta', {
radius: 0.8 // 设置饼图的大小
});
c2.legend(false);
c2.intervalStack()
.position('percent')
.color('age')
.label('age*percent',function(age, percent) {
percent = (percent * 100).toFixed(2) + '%';
return age + ' ' + percent;
});
c1.render();
c2.render();
ECharts
ECharts — это зрелая библиотека диаграмм, которая проста в использовании, имеет множество типов диаграмм и проста в использовании. Ресурсы документации также относительно богаты, поэтому я не буду здесь вдаваться в подробности.Документация по электронным картам
Сравнение ECHARTS & BizCharts & G2
Сравнивая библиотеки диаграмм BizCharts и G2, BizCharts в основном имеет слой инкапсуляции, так что диаграммы можно вызывать в виде компонентов и загружать по запросу, что более удобно в использовании. Просто сравните различия между тремя библиотеками диаграмм:
Инициализируйте диаграмму:Электронные диаграммы:
// 基于准备好的dom，初始化ECharts实例
var myChart = echarts.init(document.getElementById('main'));
БизЧартс:
// 以组件的形式，组合调用
import { Chart, Geom, Axis, ... } from 'bizcharts';
<Chart width={600} height={400} data={data}>
...
</Chart>
Г2:
// 基于准备好的dom，配置之后进行初始化
const chart = new G2.Chart({
container: 'c1', // 指定图表容器 ID
width: 600, // 指定图表宽度
height: 300 // 指定图表高度
});
chart.source(data);
chart.render();
<div id="c1" className="charts"></div>
Конфигурация:
Электронные диаграммы:
// 集中在options中进行配置
myChart.setOption({
title: {
...
},
tooltip: {},
xAxis: {
data: [...]
},
yAxis: {},
series: [{
...
}]
});
БизЧартс:
// 根据组件需要，配置参数之后进行赋值
const cols = {...};
const data = {...};
<Chart width={600} height={400} data={data} sca`enter code here`le={cols}>
...
</Chart>
G2:
chart.tooltip({
triggerOn: '...'
showTitle: {boolean}, // 是否展示 title，默认为 true
crosshairs: {
...
style: {
...
}
}
});
мероприятие:
ECharts:документация по API событий
myChart.on('click', function (params) {
console.log(params);
});
BizCharts:документация по API событий
<chart
onEvent={e => {
//do something
}}
/>
G2: документация по API событий
chart.on('mousedown', ev => {});
Суммировать
По сравнению с тремя приведенными выше диаграммами, ECharts и BizCharts относительно просты в использовании, особенно конфигурация ECharts очень понятна, и у BizCharts также есть определенные сходства. Преимущество BizCharts состоит в том, что составная форма делает структуру домена относительно ясной, и на нее можно ссылаться по запросу. G2 больше подходит для справки, когда требуется большое количество взаимодействий с диаграммами, а его богатая логика взаимодействия обработки API является относительно более выгодной.
Широкая реклама
Эта статья была опубликована вЕженедельный выпуск Mint Front End, Добро пожаловать в Watch & Star ★, пожалуйста, указывайте источник при перепечатке.