Javascript Bubble Chart mit Schieberegler

Die OK Cupid Website haben einen Infografik Artikel 10 Charts about Sex.Javascript Bubble Chart mit Schieberegler

Ich mag die Art und Weise Chart 7 enthält ein Blasendiagramm & ein Schieber.

Ich mag die gleiche Sache mit meinen eigenen Javascript-Visualisierung im Idealfall mit einer jQuery-Bibliothek tun.

erscheinen die OK Amor Leider eine Reihe von PNG-Bilder von Bubble Charts animiert zu haben.

Ich würde einige Hinweise zu schätzen wissen, ob eine vorhandene Charting-Bibliothek gibt es, die den Schieber integrieren. Alternativ ist es möglich, mehrere Bubble Charts mit einem Schieberegler darzustellen und dennoch eine gute Performance zu erzielen.

Quelle

2013-05-30 ChrisGuest

Mögliche Bubble-Charting-Lösung ... http://jondavidjohn.github.io/bubblechart/ – jondavidjohn

Um diese Aufgabe zu lösen, würde ich die highcharts-Bibliothek und ihre Series.SetData() -Funktion verwenden. Auch jQuery UI slider

Wie es funktioniert:

1) Binden Sie die Funktion jquery ui Slider-Event

2) Diese Funktion wird Series.SetData() mit verschiedenen Sätzen von Daten (basierend auf aktuellen Schieber laufen Position) auf highcharts Diagramm

Quelle

2013-05-30 06:05:35 Vadim

HighChartJS + JqueryUISlider sind die besten Lösungen.

Das Blasendiagramm ist hier: http://www.highcharts.com/demo/bubble

Sie importieren müssen:

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

Und so etwas tun:

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

Quelle

2013-05-30 07:23:02 nayfun

Es scheint mir, dass Highcharts nicht für eine kommerzielle Nutzung ohne eine bezahlte Lizenz verwendet werden können – gray

Das Problem, das Sie laufen würden in, wenn highcharts für diese Aufgabe besteht darin, dass die Größe der Blasen auf den Chart spezifisch sein wird Sie gerade angezeigt wird. Wenn Sie das Wachstum der Blasen realistischer darstellen möchten, müssen Sie einen etwas anderen Ansatz wählen.

habe ich eine Kombination aus HighCharts und jQuery UI Beschrifteten Schieber dies erst vor kurzem zu erreichen.

Sie werden haben müssen:

In highcharts-mo re.src.js, diesen Abschnitt finden:

 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); 
    }

und ersetzen Sie es mit diesem:

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

Dann, wenn Sie highcharts initialisieren müssen Sie Folgendes einstellen:

        plotOptions: { 
            bubble: { 
             maxSize: MAXVALUE } }

wo MAXVALUE ist der höchste Wert in allen Charts.

würden Sie dann die Daten des Diagramm aktualisieren Sie Ihre bevorzugte Methode, basierend auf jedem Tick. Beispiel:

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

Dies wird sicherstellen, dass eine Blase auf Diagramm 1, die eine Größe von 100 hat, ist kleiner als eine Blase auf Diagramm 2, die eine Größe von 200 hat, was nicht der Fall wäre, wenn man einfach aktualisiert die Daten jedes Mal, da es zu den aktuell angezeigten Daten relativ ist.

Quelle

2013-05-31 13:40:54 johnmadrak

Javascript Bubble Chart mit Schieberegler

Antwort

Verwandte Themen