Вставить пузырьковые диаграммы на веб-сайте

Question

Я ищу способ создания так называемой «пузырьковой диаграммы» для веб-сайта, который я создаю. Он должен быть совместим с IE7 и выше, и, конечно, со всеми хорошими браузерами, такими как Firefox, Chrome и Safari. И нет вспышки, так как эта вещь должна будет работать на iOS.

График должен выглядеть следующим образом, http://www.flickr.com/photos/jgrahamthomas/5591441300/

Я просматривал онлайн и пробовал несколько вещей, в том числе:

1. Google Scatter Charts. Это не работает, так как кажется, что Google Charts ограничивает размер точки чем-то меньшим, чем мне нужно. И диаграммы Венна ограничены тремя кругами.
2. Протовис Дотс. Отличная библиотека, но не совместима с IE8.
3. Рафаэль Джаваскрипт . Это может быть моей лучшей ставкой, но нет явной поддержки пузырьковых диаграмм.

Спасибо за вашу помощь.

Answer 1

Похоже, что Raphael javascript - это путь.Это совместимо с IE6.Я нашел отличный учебник на http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library/ и смог получить пример, работающий на моем сайте rails с этим кодом:

# window.onload = function() {  
#   var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);  
#   var circle = paper.circle(100, 100, 80);  
#   for(var i = 0; i < 5; i+=1) {  
#     var multiplier = i*5;  
#     paper.circle(250 + (2*multiplier), 100 + multiplier, 50 - multiplier)  
#   }  
#   var rectangle = paper.rect(200, 200, 250, 100);  
#   var ellipse = paper.ellipse(200, 400, 100, 50);  
# }  

Answer 2

Здесь есть пузырьковая диаграмма для флота здесь Обратите внимание, что вам нужно самим масштабировать размер пузырьков, если вы не хотите, чтобы они покрывали график. Документация здесь .

Чтобы использовать его, добавьте следующее в начале своей HTML-страницы:

и вызовите его из результата json или любого объекта данных, как в этом примере:

$.getJSON('myQuery.py?'+params, function(oJson) {
// ... Some validation here to see if the query worked well ...

$.plot('#myContainer',
   // ---------- Series ----------
   [{
      label: 'Line Sample',
      data:   oJson.lineData,
      color:  'rgba(192, 16, 16, .2)',
      lines:  { show: true },
      points: { show: false }
   },{
      label: 'Bubble Sample',
      data:   oJson.bubbleData, // arrays of [x,y,size]
      color:  'rgba(80, 224, 80, .5)',
      lines:  { show: false },
      points: { show: false },
   },{
      label: 'Points sample',
      data:   oJson.pointsData,
      color:  'rgba(255, 255, 0, 1)',
      lines:  { show: false },
      points: { show: true, fillColor: 'rgba(255, 255, 0, .8)' }
   },{
      ...other series
   }],
   // ---------- Options ----------
   { legend: {
      show: true,
      labelBoxBorderColor: 'rgba(32, 32, 32, .2)',
      noColumns: 6,
      position: "se",
      backgroundColor: 'rgba(224, 224, 224, .2)',
      backgroundOpacity: .2,
      sorted: false
   },
   series: {
      bubbles: { active: true, show: true, fill: true, linewidth: 2 }
   },
   grid: { hoverable: true, clickable: true } },
   xaxis: { tickLength: 0 }
}); // End of plot call
// ...

}); // End of getJSON call

Я пытался сделать то же самое с jqPlot, который имеет некоторые преимущества, но не работает с пузырьками и другими сериями на одном графике. Также Flot лучше справляется с синхронизацией масштаба общих осей со многими сериями. Highchart действительно хорошо справляется с этой задачей (смешивая пузырьковую диаграмму с другими сериями), но не является бесплатным для нас (правительственный контекст).

Answer 3

Вы смотрели на флот ?

Это библиотека черчения для jQuery. Хотя технически он не имеет никакой «родной» поддержки для пузырьковых диаграмм, с его помощью можно создавать пузырьковые диаграммы, используя несколько приемов, самый простой из которых, вероятно, состоит в том, чтобы просто поместить каждую точку в свой ряд данных (что позволяет вам контролировать радиус каждой отдельной точки.

Определив ваши точки, подобные этим, вы сможете создать пузырьковую диаграмму:

var dataSet = [{
    color:"rgba(0,0,0,0)", // Set the color so it's transparent
    shadowSize:0, // No drop shadow effect
    data: [[0,1],], // Coordinates of the point, normally you'd have several
                    // points listed here...
    points: {
        show:true,
        fill:true,
        radius: 2, // Here we set the radius of the point (or rather, all points
                   // in the data series which in this case is just one)
        fillColor: "rgba(255,140,0,1)", // Bright orange :D
    }
},
/* Insert more points here */
];

Answer 4

Вы можете дать Protovis шанс, библиотека выглядит хорошо для ваших нужд: http://vis.stanford.edu/protovis/ex/

Другая библиотека графиков - Highcharts, но я еще не пробовал: http://www.highcharts.com/