Demand Background:

Chart library selection

In the old project, G2 configuration was used for implementation, which was scattered and difficult to maintain in the later stage. In the new requirement, reconstruction was considered

Therefore, a wave of chart libraries were investigated. At present, the mainstream chart libraries include Echarts, HighCharts, D3js, ANTV (G2, G6, F2) and React chart library Rechart based on D3 package. There are also React charting libraries viser and Bizcharts based on G2 packaging. There are also diagrams showing Cytoscapejs used; So how to choose?

Since the project is the React framework, I consider using the React package chart library. I have checked the BizCharts chart library. The document feels very complete and has been maintained on GitHub. The new version of the chart library is V4.x

Bizcharts.net/product/Biz…

The problem

At the beginning, demo implementation of related components was carried out according to the requirements. Bar graph, line graph, histogram and ring graph were relatively simple and could be realized according to the document. However, when implementing bullet graph, the demo on the document was problematic. What to do?

The first thought was to go to GitHub and look at the source code. Many of the configuration properties in the documentation are obsolete

Github.com/alibaba/Biz…

Then go to find the bullet antv figure g2plot. Antv. Vision/useful/docs/API…

Present after nearly a day of exploration, the implementation of the demo code

import React from 'react'; import ReactDOM from 'react-dom'; import { BulletChart } from 'bizcharts'; // Const mockData = [{title: "satisfaction ", Measures: [83], Target: [80], Ranges: [0, 10, 40, 75, 100],}; function Demo() { return ( <BulletChart data={mockData} xField="title" yField="ranges" height={90} measureField="measures" rangeField="ranges" targetField="target" size={{ measure: 10, range: 28, target: 25, }} color={{ measure: ["#43467c"], target: ["#000000"], range: ["#b4ebbf", "#ffb1ac", "#ffdba1", "#abc9f0"], }} bulletStyle={{ target: { width: 15, fill: "#000000", }, }} yAxis={{ tickCount: 11, top: true, }} legend={{ custom: "true", position: "top", offsetX: 8, items: [{name: "class average ", marker: {symbol: "circle", style: {fill: "#43467c",},},}, {name:" marker ", {symbol: "Line ", style: {stroke: "#000000",},},}, {marker: {symbol: "circle", style: {fill: "# ffb1ac"}},}, {name: "pass", marker: {symbol: "circle", style: {the fill: "# ffdba1},},}, {name:" good, "marker: {symbol: "circle", style: {fill: "#abc9f0",},},}, {name: "good ", marker: {symbol: "circle", style: {fill: "#b4ebbf", }, }, }, ], }} /> ); } ReactDOM.render(<Demo />, mountNode);Copy the code