带滑块的Javascript气泡图

Question

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

我真的很喜欢Chart #7包含一个气泡图和一个滑块的方式。

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

不幸的是，OK丘比特似乎制作了一系列气泡图的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

然后做这样的事情：

/*此处创建您的Highchart脚本(参见气泡图链接) */ var chart = ...；$( "#slider“).slider({ value:25，min: 0，max: 100，step: 5，slide: function( event，ui ){ chart.series.setData(... )；} });

Answer 2

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

我最近使用了HighCharts和jQuery UI标签滑块的组合来实现这一点。

您需要具备以下条件：

• http://jquery.com/
• http://jqueryui.com/
• https://github.com/ctcherry/jquery-ui.labeled-slider
• http://code.highcharts.com/highcharts.js
• http://code.highcharts.com/highcharts-more.src.js

在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的气泡小，如果您每次都简单地更新数据，情况就不同了，因为它是相对于当前显示的数据的。

Answer 3

为了解决这个问题，我将使用highcharts库和它的Series.SetData()函数。也就是jQuery UI slider

它的工作原理：

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

2)此函数将对highcharts上的不同数据集(基于当前滑块位置)运行Series.SetData()