给大家分享一个图表库LightningChart.

为什么要使用它

前端图表库是真的不少，浏览器一搜七八个是有了。而且我们现在常用的echarts或者AntV, 已经能满足我们的需求。那我们为什么还要花精力去研究一个新的图表。原因很简单，就是它快。LightningChart是通过WebGL渲染的，使用的是GPU加速。在一些特殊的领域，比如军事、医疗、科学分析等，图表的渲染性能才是王道。我们使用LightningChart的动机就是由于我们的电波所的项目，echart的性能不能满足用户的需求，换上LightningChart后图表的渲染性能肉眼可见的提升。可以通过运行这个Demo进行对比。

白嫖

很遗憾LightningChart并不是开源的。要想使用它正式的版本是要花美元的。还好它提供一个免费的社区版本，但是带着logo。所以我们要修改它的源码把logo去掉。没有任何事情能阻挡我们白嫖的决心。我打开晦涩的源码开始一顿分析，加上各种断点，一顿操作猛如虎，结果还是原地杵。可能是我满地的头发感动了上苍，让我瞎猫碰上死耗子歪打正着了。最终我的头发换来了下面的两句话：

• 打开 node_modules/@arction/lcjs/dist/lcjs.js 文件
• 将 ,s=i?jU(r):void 0, 全部替换为 ,s=void 0,

做前端的小伙伴知道，每次重新yarn或npm install，文件都是最新的。这样我们得多次执行上面修改源码的操作。还好我们有小帮手patch-package,有了它你再也不用担心自己会忘记修改了。patch-package使用起来非常简单，只需要三步

1. 安装

npm i patch-package
# 或者
yarn add patch-package postinstall-postinstall

2. 修改package.json

 "scripts": {
+  "postinstall": "patch-package"
 }

3. 使用patch-package

# 修改node_modules/@arction/lcjs/dist/lcjs.js文件后执行
yarn patch-package @arction/lcjs

执行成功后它在项目根目录下创建一个补丁文件

patches
└── @arction+lcjs+3.2.0.patch

我们每次重新yarn或者npm install都会借助补丁文件自动把源码修改了。

通过几个例子熟悉

lightningchart的具体使用主要还是查看文档.文档虽然很详细,但是上来就看文档也会淹没在大而全的api描述中,我们得通过它提供的例子来找到图表的各个部分和文档对应的关系.下面我就简单介绍一下图表的各个部分的使用,为初次使用的人有个直观的概念,也方便文档的查阅.

lightningchart主要包含两种图表,一个是我们最熟悉的有一个x轴和一个y轴的平面的图表.比如各种平面的折线图,柱状图等等. 它用着ChartXY类来表示平面的图表.除此之外,lightningchart还提供酷炫的3D图表,用户Chart3D类表示3d的图表.3D图表我还没有机会使用到,就是不介绍.下面就主要介绍一下ChartXY.

ChartXY

ChartXY的文档

通过下面代码,我们可以创建一个空黑的色图表.

const {lightningChart,SolidFill,ColorHEX} = lcjs;

const chart = lightningChart().ChartXY({container: 'chart0'})

chart.setTitle("自定义图表标题")
     .setPadding(10)
       // 背景颜色
     .setBackgroundFillStyle(new SolidFill({ color: ColorHEX('#BEB8DC') }))
     .setSeriesBackgroundFillStyle(new SolidFill({ color: ColorHEX('#FA7F6F') }));

LineSeries

ChartXY可以创建各种类型的图表,通过不同语义化的Series类型区分不同的图表类型, 比如LineSeries表示连线图表,通过它可以绘制折线图,曲线图等. PointSeries表点图表,通过它可以绘制散点图.RectangleSeries表示绘制面图表.比如我们常用的柱状图等.下面我们拿LineSeries类绘制多条曲线.

LineSeries 文档

const {lightningChart, SolidLine, ColorHEX, SolidFill} = lcjs

const chart = lightningChart().ChartXY({container: 'chart3'})

chart.setTitle("多折线图表");

const data1 = [
    { x: 0, y: 1.52 },
    { x: 1, y: 1.52 },
    { x: 2, y: 1.52 },
    { x: 3, y: 1.58 },
    { x: 4, y: 2.00 },
    { x: 5, y: 3.00 },
    { x: 6, y: 4.00 },
    { x: 7, y: 1.00 },
    { x: 8, y: 1.60 }
];

const data2 = [
    { x: 0, y: 1.35 },
    { x: 1, y: 2.00 },
    { x: 2, y: 1.50 },
    { x: 3, y: 1.35 },
    { x: 4, y: 1.90 },
    { x: 5, y: 1.90 },
    { x: 6, y: 1.90 },
    { x: 7, y: 1.92 },
    { x: 8, y: 1.50 }
];

const lineSeries1 = chart.addLineSeries();

// 自定义样式
lineSeries1.setStrokeStyle(new SolidLine({
    thickness: 2,
    fillStyle: new SolidFill({ color: ColorHEX('#F00') })
}));
lineSeries1.add(data1);

const lineSeries2 = chart.addLineSeries();
lineSeries2.add(data2);

Axis

Axis表示图表中的X轴,Y轴

const {lightningChart, AxisTickStrategies} = lcjs

const chart = lightningChart().ChartXY({container: 'chart4'})

chart.setPadding(10)
     .setTitle("设置X,Y轴")


const data1 = [
    { x: 0, y: 1.52 },
    { x: 1, y: 1.52 },
    { x: 2, y: 1.52 },
    { x: 3, y: 1.58 },
    { x: 4, y: 2.00 },
    { x: 5, y: 3.00 },
    { x: 6, y: 4.00 },
    { x: 7, y: 1.00 },
    { x: 8, y: 1.60 }
]
const data2 = [
    { x: 0, y: 1.35 },
    { x: 1, y: 2.00 },
    { x: 2, y: 1.50 },
    { x: 3, y: 1.35 },
    { x: 4, y: 1.90 },
    { x: 5, y: 1.90 },
    { x: 6, y: 1.90 },
    { x: 7, y: 1.92 },
    { x: 8, y: 1.50 }
]
const lineSeries1 = chart.addLineSeries();
lineSeries1.add(data1);

const lineSeries2 = chart.addLineSeries();
lineSeries2.add(data2);

const axisX = chart.getDefaultAxisX();
const axisY = chart.getDefaultAxisY();

const formatAxisX = val => val.toString() + 'h';

axisX.setTitle("时间")
     .setTickStrategy(AxisTickStrategies.Numeric, strategy =>
      strategy
      .setMajorFormattingFunction(formatAxisX)
      .setMinorFormattingFunction(formatAxisX)
    );

axisY.setTitle("温度")

LegendBox

LegendBox表示图表中的图例

const {lightningChart, AxisTickStrategies, LegendBoxBuilders} = lcjs

const chart = lightningChart().ChartXY({container: 'chart5'})

chart.setPadding(10)
     .setTitle("带图例图表")

const data1 = [
    { x: 0, y: 1.52 },
    { x: 1, y: 1.52 },
    { x: 2, y: 1.52 },
    { x: 3, y: 1.58 },
    { x: 4, y: 2.00 },
    { x: 5, y: 3.00 },
    { x: 6, y: 4.00 },
    { x: 7, y: 1.00 },
    { x: 8, y: 1.60 }
]

const data2 = [
    { x: 0, y: 1.35 },
    { x: 1, y: 2.00 },
    { x: 2, y: 1.50 },
    { x: 3, y: 1.35 },
    { x: 4, y: 1.90 },
    { x: 5, y: 1.90 },
    { x: 6, y: 1.90 },
    { x: 7, y: 1.92 },
    { x: 8, y: 1.50 }
]

const lineSeries1 = chart.addLineSeries();
lineSeries1.add(data1);

const lineSeries2 = chart.addLineSeries();
lineSeries2.add(data2);

const legend = chart.addLegendBox(LegendBoxBuilders.HorizontalLegendBox);

legend.add(chart);