javascript - 带有滑块的 Javascript 气泡图

Question

OK Cupid 网站有一篇名为10 Charts about Sex的信息图表文章。

我真的很喜欢 Chart #7 结合气泡图和滑块的方式。

我想用我自己的 Javascript 可视化做同样的事情，最好使用 jQuery 库。

不幸的是，OK丘比特似乎已经为一系列气泡图的PNG图像制作了动画。

对于是否存在可以合并滑块的现有图表库，我将不胜感激。或者，是否可以使用滑块呈现多个气泡图并仍然获得良好的性能。

score 2 · Accepted Answer

HighChartJS + JqueryUISlider 是最好的解决方案。

气泡图在这里： http ://www.highcharts.com/demo/bubble

您需要导入：

http://code.jquery.com/jquery-1.9.1.min.js
http://code.jquery.com/ui/1.10.3/jquery-ui.js

http://code.highcharts.com/highcharts.js

并做这样的事情：

   /* Here create your Highchart script (see bubble chart link) */
   var chart = [...];

   $( "#slider" ).slider({
      value:25,
      min: 0,
      max: 100,
      step: 5,
      slide: function( event, ui ) {
         chart.series[0].setData([...] );
      }
   });

<body>
        <div id="your_chart"></div>
        <div id="slider"></div>
</body>

score 1 · Accepted Answer

使用 highcharts 执行此任务时会遇到的问题是气泡的大小将特定于您当前显示的图表。如果您想更真实地显示气泡大小的增长，则必须采用稍微不同的方法。

我最近使用了 HighCharts 和 jQuery UI Labeled 滑块的组合来完成此操作。

你需要有：

在 highcharts-more.src.js 中，找到这个部分：

        for (i = 0, len = zData.length; i < len; i++) {
        zRange = zMax - zMin;
        pos = zRange > 0 ? // relative size, a number between 0 and 1
            (zData[i] - zMin) / (zMax - zMin) : 
            0.5;
        radii.push(math.round(minSize + pos * (maxSize - minSize)) / 2);
    }

并将其替换为：

        for (i = 0, len = zData.length; i < len; i++) {
        radii.push((zData[i]/maxSize)*100);
    }

然后，当您初始化 highcharts 时，您需要设置以下内容：

                                    plotOptions: {
                                    bubble: {
                                        maxSize: MAXVALUE } }

其中 MAXVALUE 是所有图表中的最大值。

然后，您将根据每个分时使用您喜欢的方法更新图表的数据。例子：

                            $( "#slider" ).labeledslider({
                          value:0,
                          min: 0,
                          max: 7,
                          step: 1,
                          slide: function( event, ui ) {
                            adjustHighchart(ui.value);  
                          }
                        });

这将确保图表 1 上大小为 100 的气泡小于图表 2 上大小为 200 的气泡，如果您每次都简单地更新数据，则不会出现这种情况，因为它是相对于当前显示的数据。

score 0 · Accepted Answer

为了解决这个任务，我将使用 highcharts 库及其 Series.SetData() 函数。还有jQuery UI 滑块

这个怎么运作：

1）将函数绑定到jquery ui滑块更改事件

2) 此函数将在 highcharts 图表上使用不同的数据集（基于当前滑块位置）运行 Series.SetData()

javascript - 带有滑块的 Javascript 气泡图

3 回答 3

Related

Reference