帶滑塊的Javascript氣泡圖

/* 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>

來源

2013-05-30 07:23:02 nayfun

在我看來，如果沒有付費許可證，highcharts不能用於商業用途 – gray

你會遇到問題使用highcharts這個任務的時候到是氣泡的大小將具體到您當前正在顯示圖表。如果你想更真實地顯示氣泡大小的增長，你將不得不採取稍微不同的方法。

我用HighCharts和jQuery UI標記滑塊的組合相當最近完成這一任務。

你需要有：

在highcharts謨re.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，這將不會是如果單純更新的情況下更小的數據每次都是相對於當前顯示的數據而言的。

來源

2013-05-31 13:40:54 johnmadrak

帶滑塊的Javascript氣泡圖

回答

相關問題