前端如何绘制带坐标的散点图(注:散点的颜色与权重有关)

yangtoude
  • 326

1,我要绘制这样的一幅图:

clipboard.png

带坐标,每个坐标点的数据如下:
[x(横坐标), y(纵坐标), weight(权重)]
不同权重颜色不同,权重越高,颜色越亮,如果权重为0,就是蓝色。图片颜色会产生一定的渐变。

2,我看了下echarts的散点图,觉得echarts不能完全满足需求。主要原因如下:echarts绘制散点图的大致思路是,给定坐标范围和需要绘制的坐标点,然后在需要绘制的坐标上画点。如果只有一个系列的数据,这个系列就只会有一个颜色。我的数据就只有一个系列,因此颜色渐变的效果较难实现。

3,问题:
(1)前端是否还有其它的canvas或其它js画图插件可以实现我的需求?
(2)如果没有,我的另一个思路是:用canvas绘制一个坐标系(82x82),图片由后端生成,然后用canvas将后端图片绘制到坐标系中。但绘制坐标系貌似也比较麻烦,有没有比较好用的库来实现?(项目着急,感觉自己手写js搞不定)。

回复
阅读 3.5k
1 个回答
✓ 已被采纳

主要是权重和颜色的映射。这个对应好,canvas手动画就行了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏