一款轻量级的散点图工具
svg.js, ES6, lodash.js Github点击这里
接入方式入方式
-
引入svg.js,lodash.js,ScatterPlot.js
-
准备一个容器（div）
-
传入一个chart对象，实例化SCATTER_PLOT:
let sp=new SCATTER_PLOT('container', chart,function(arg){});
chart对象
chart对象的属性主要包含：
- title (object)
- subtitle (object)
- xAxis (object)
- yAxis (object)
- DisplayDataLabel (bool)
- DisplayToolTip (bool)
- legend (array)
- data (array)
legend的item需包含的属性:Shape,Name,可选属性：Color
data的item需包含的属性:id,x,y,color,shape,size,lable,可选属性:tooltip
legend,chart demo
let legend = [{
Shape: "circle",
Name: "product Output"},{
Shape: "square",
Name: "Aging WIP"
},
{
Name: "Test",
Color: "#409EFF"
},
{
Name: "Color",
Color: "#67C23A"
}];
let chart = {
title: {
text: "507 人按性别划分的身高和体重分布图"
},
subtitle: {
text: "数据来源: Heinz 203"
},
xAxis: {
title: "体重 (kg)",
category: "Number",
gridLineWidth: 0.5
},
yAxis: {
title: "身高 (cm)",
gridLineWidth: 0.5
},
DisplayDataLabel: true,
DisplayToolTip: true,
legend: legend,
data: [{
id: "scatter0",
y: 184,
x: 68,
color: "#67C23A",
shape: "square",
size: 43,
lable: "fct12",
tooltip: "name:Tom;age:18;height:123"
}]
};
SCATTER_PLOT构造函数
SCATTER_PLOT构造函数接收三个参数，container id,chart对象，以及回调函数。其中回调函数中的返回参数为chart对象中的data
拓展功能
update函数
sp.update(scatter,2000);
调用此方法，可刷新散点图，再配合settimeout，可以实现动画效果。
局部放大功能
若某一部分的散点过于密集，可以使用鼠标按下选择需要放大的区域，松开鼠标后，自动放大。
--END--
