auto-annotations是一个帮助你在可视化图表中自动标注出有价值的信息的工具。
npm i --save auto-annotations
AutoAnnotation
会识别视图中的洞察信息,并根据洞察的显著性推荐最合适的洞察,并返回一个标注函数。后续调用这个标注函数,即可完成在图表上的标注。
- 构建参数:
view
,为一个G2.View - 方法
recommand()
返回一个annotation函数,这个函数获得参数后可以用来绘制。
以cars数据集为例,这里原视图是一张["Displacement", "Acceleration"]两个数值字段构成的散点图。
import { annotations, AutoAnnotation } from 'auto-annotations';
// 声明一个G2图表
chart.point().position(["Displacement", "Acceleration"]);
chart.data(dataSource);
// 创建一个AutoAnnotation类
const ann = new AutoAnnotation(chart);
// 推荐一种标注,并获得标注绘制函数。
const annotate = ann.recommand()
annotate(chart);
chart.render();
最终的推荐结果如下, auto-annotations
识别到图中存在一些异常值,并将它们标注了出来。
除了自动推荐标注外,当你有明确的分析目的时,你也可以直接使用你想要的标注。这些标注函数可以识别特定的洞察类型,并进行标注。标注函数本身并不是纯粹的绘制函数,其必须先识别到视图中的某个具体的洞察,根据洞察的一些数理信息,进行标注。
annotations.annotateGeneralRegression(
view: View,
order?: number
)
import {annotations} from 'auto-annotations';
chart.line().position([xField, yField]);
chart.data(mockData);
annotations.annotateGeneralRegression(chart);
chart.render()
import {annotations} from 'auto-annotations';
chart.line().position([xField, yField]);
chart.data(mockData);
annotations.annotateGeneralRegression(chart, 4);
chart.render()
对auto-annotation而言,散点图回归和折线图回归是没有本质区别的。
import {annotations} from 'auto-annotations';
chart.line().position([xField, yField]);
chart.data(data);
annotations.annotateGeneralRegression(chart);
chart.render()
import {annotations} from 'auto-annotations';
chart.point().shape('circle').position([xField, yField]);
chart.data(dataSource);
annotations.annotateOutlier(chart);
chart.render();
import {annotations} from 'auto-annotations';
chart.point().position([xField, yField]);
chart.data(dataSource);
annotations.annotateCluster(chart);
chart.render();