plotty

发表于

更新于

阅读量

plotty 是一个用于帮助绘制 2D 数据并提供颜色缩放功能的库。将您的阵列数据放入其中并接收新图像。

安装

javascript

npm install plotty --save

文档

http://santilland.github.io/plotty/

使用方法

在头部引入script文件并且在你需要渲染数据的地方添加一个canvas元素

javascript

<head>
  <script src="dist/plotty.min.js"></script>
</head>
<body>
  <canvas id="canvas" width=100 height=100></canvas>
</body>

使用预定义设置渲染

javascript

// Generate or load some data (Working with buffer arrays for now)
var width = 100;
var height = 100;
var exampledata = new Float32Array(height * width);

var xoff = width / 3;
var yoff = height / 3;

for (y = 0; y <= height; y++) {
  for (x = 0; x <= width; x++) {
    // calculate sine based on distance
    x2 = x - xoff;
    y2 = y - yoff;
    d = Math.sqrt(x2*x2 + y2*y2);
    t = Math.sin(d/6.0);

    // save sine
    exampledata[(y*width)+x] = t;
  }
}

plot = new plotty.plot({
  canvas: document.getElementById("canvas"),
  data: exampledata, width: width, height: height,
  domain: [-1, 1], colorScale: 'viridis'
});
plot.render();

colorScale列表选择：


viridis	inferno	turbo
rainbow	jet	hsv
hot	cool	spring
summer	autumn	winter
bone	copper	greys
ylgnbu	greens	ylorrd
bluered	rdbu	picnic
portland	blackbody	earth
electric	magma	plasma

同时也能够自定义渲染你自己的颜色表,通过使用addColorScale函数

javascript

plotty.addColorScale("mycolorscale", ["#00ff00", "#0000ff", "#ff0000"], [0, 0.5, 1]);
// ( identifier,color_steps,color, percentage_steps)

plotty ​

安装 ​

文档 ​

使用方法 ​

plotty

安装

文档

使用方法