OK Cupid 网站有一篇名为 10 Charts about Sex 的信息图表文章.
我非常喜欢图表 #7 结合气泡图和 slider 的方式。
我想用我自己的 Javascript 可视化做同样的事情,最好是使用 jQuery 库。
不幸的是,OK Cupid 似乎对一系列气泡图的 PNG 图像进行了动画处理。
关于是否存在可以合并 slider 的现有图表库,我将不胜感激。或者,是否可以使用 slider 显示多个气泡图并仍然获得良好的性能。
最佳答案
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>
关于带有 slider 的 Javascript 气泡图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16827496/