Tablica bąbelkowa JavaScript z suwakiem

Witryna OK Cupid zawiera artykuł infograficzny o nazwie 10 Charts about Sex.Tablica bąbelkowa JavaScript z suwakiem

Bardzo podoba mi się sposób, w jaki wykres nr 7 zawiera wykres bąbelkowy & suwak.

Chciałbym zrobić to samo z własnymi wizualizacjami JavaScript najlepiej przy użyciu biblioteki jQuery.

Niestety, wydaje się, że OK Cupid animował serię obrazów PNG w postaci wykresów bąbelkowych.

Byłbym wdzięczny za kilka wskazówek, czy istnieje istniejąca biblioteka wykresów, która może zawierać suwak. Alternatywnie można przedstawić kilka wykresów bąbelkowych za pomocą suwaka i nadal uzyskać dobrą wydajność.

Źródło

2013-05-30 ChrisGuest

Możliwe rozwiązanie do tworzenia wykresów bąbelkowych ... http://jondavidjohn.github.io/bubblechart/ – jondavidjohn

Do rozwiązania tego zadania użyłbym biblioteki Highcharts i jej funkcji Series.SetData(). Również jQuery UI slider

Jak to działa:

1) Zwiąż funkcję jQuery UI zmiany suwak imprezy

2) Funkcja ta będzie działać Series.SetData() z różnych zestawów danych (na podstawie aktualnego suwaka pozycja) na wykresie wysokiej jakości

Źródło

2013-05-30 06:05:35 Vadim

HighChartJS + JqueryUISlider to najlepsze rozwiązania.

Wykres bąbelkowy jest tutaj: http://www.highcharts.com/demo/bubble

trzeba importować:

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

i zrobić coś takiego:

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

Źródło

2013-05-30 07:23:02 nayfun

Wydaje mi się, że Highcharts nie mogą być wykorzystywane do komercyjnego użytku bez płatnej licencji – gray

Kwestia będziesz napotkasz podczas korzystania highcharts dla tego zadania jest, że wielkość pęcherzyków będą specyficzne dla wykresu aktualnie wyświetlanie. Jeśli chcesz realistycznie powiększyć wzrost bąbelków, musisz przyjąć nieco inne podejście.

Użyłem kombinacji HighCharts i jQuery UI Labeled suwaka, aby osiągnąć to całkiem niedawno.

Musisz mieć:

W highcharts-MO re.src.js, znaleźć ten rozdział:

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

i zastąpić ją w ten sposób:

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

Wtedy, kiedy zainicjować highcharts trzeba ustawić:

        plotOptions: { 
            bubble: { 
             maxSize: MAXVALUE } }

Gdzie MAXVALUE jest najwyższą wartością na wszystkich wykresach.

Następnie należy zaktualizować dane wykresu za pomocą preferowanej metody opartej na każdym tiku. Przykład:

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

To będzie upewnić się, że bańka na wykresie 1, który ma wielkość 100 jest mniejszy niż bańka na wykresie 2, który ma rozmiar 200, co nie byłoby, gdyby po prostu zaktualizowany dane za każdym razem, ponieważ są one relatywne do aktualnie wyświetlanych danych.

Źródło

2013-05-31 13:40:54 johnmadrak

Tablica bąbelkowa JavaScript z suwakiem

Odpowiedz

Powiązane problemy