一款轻量级的散点图工具

一款轻量级的散点图工具

svg.js, ES6, lodash.js
Github
浏览Demo点击这里

接入方式入方式

• 引入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–

，可以实现动画效果。

局部放大功能

若某一部分的散点过于密集，可以使用鼠标按下选择需要放大的区域，松开鼠标后，自动放大。

–END–