Question

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

我非常喜欢图表＃7包含气泡图和方式的方式。一个滑块。

我想用自己的Javascript可视化理想情况下使用jQuery库做同样的事情。

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

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

Answer 1

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>

Answer 2

使用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的气泡，如果您每次只更新数据，则不会出现这种情况。＃39;相对于当前显示的数据。

Answer 3

为解决此任务，我将使用highcharts库及其Series.SetData（）函数。另外jQuery UI slider

工作原理：

1）将函数绑定到jquery ui slider change事件

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

带滑块的Javascript气泡图

3 个答案: