【问题标题】:HTML5 + JS Polar Scatter ChartsHTML5 + JS 极坐标散点图
【发布时间】:2012-02-08 21:25:21
【问题描述】:

任何人都可以推荐现有的 HTMl5 / JS 数据可视化工具包或库,以帮助生成类似于此的极坐标散点图吗?代码示例会很酷!

http://matplotlib.sourceforge.net/examples/pylab_examples/polar_scatter.html

不幸的是,我必须在平板电脑上进行这项工作才能查看数据的实时副本。所以没有闪存,我不能每天使用 matplotlib 或其他方式预先生成它。

提前谢谢你!

更新:

我最终会做类似的事情:

http://mbostock.github.com/protovis/ex/transform.html

尤其是以下代码有很大帮助:

var x = pv.Scale.linear(-kx, kx).range(0, w),
    y = pv.Scale.linear(-ky, ky).range(0, h);

var data = pv.range(100).map(function(i) {
    var r = .5 + .2 * Math.random(), a = Math.PI * i / 50;
    return {x: r * Math.cos(a), y: r * Math.sin(a)};
  });

其中 r 由 DB 中的一个值驱动(不是随机的),并且绘制气泡类似于:

http://mbostock.github.com/protovis/ex/bubble.html

根据我的喜好设置大小、标题和半径。

这将为您提供类似于 matplotlib 提供的加权极坐标散点图,而普通雷达图只会让您应用图标而不是加权气泡。

【问题讨论】:

    标签: javascript html charts data-visualization scatter-plot


    【解决方案1】:

    Sencha.com 的 EXT.js 可以做到这一点。它也会自动渲染到 Canvas 和 SVG。

    http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/charts/Radar.html

    【讨论】:

    • 谢谢,但常规雷达并不能真正满足我的需求。
    【解决方案2】:

    您可以看一下广告D3。他们有很多可视化示例,包括散点图。

    【讨论】:

    • 我实际上是在使用 protovis 来执行此操作,但它使用来自一个角而不是圆心的 x,y 坐标。我在计算坐标以分散体重圈时遇到问题。想法?
    猜你喜欢
    • 1970-01-01
    • 2018-03-03
    • 2023-03-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多