Rendering HighCharts do klasy zamiast id?

Question

Mam następujący które działa prawidłowo:

$(document).ready(function() { 

    get_data_for_chart(); 

    function get_data_for_chart() { 
     $.ajax({ 
      url: 'get_data.aspx?rand=' + Math.random(), 
      type: 'GET', 
      dataType: 'json', 
      error: function(xhr, status, error) { 
       console.log(status); 
       console.log(xhr.responseText); 
      }, 
      success: function(results) { 
       var chart1; 

       chart1 = new Highcharts.Chart({ 
        chart: { 
         renderTo: 'portlet_content_18', 
         defaultSeriesType: 'column' 
        } 
       }); 

      } 
     }); 
    } 
}); 

Jeżeli HTML wygląda tak:

<div id="portlet_content_18"> 

Użytkownik może wybrać, które dynamicznie portlet on/ona chce na ekranie. S/On może również wybrać to samo, aby mieć ten sam portlet na ekranie więcej niż jeden raz ze względów porównawczych.

Więc jeśli HTML kończy się staje:

<div id="portlet_content_18"> 
<div id="portlet_content_18"> 

Tylko pierwszy div zostanie wypełniona wykresu, a druga pozostaje pusty. Jak mogę obejść ten problem?

Answer 1

Tak, można. Zobacz ich przykładem tutaj: http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/renderto-jquery/

zasadzie element jQuery można przypisać do zmiennej:

renderTo: $('.myclass')[0]

Answer 2

Jak Ido już said, nie można mieć wiele identyfikatorów, ale można mieć wiele klas.

musiałem wykonać następujące czynności:

var $containers = $('.container'), 
    chartConfig = { 
     chart: { 
      renderTo: null, 
      defaultSeriesType: 'column' 
     } 
    }; 

$containers.each(function(i, e){ 
    chartConfig.chart.renderTo = e; 
    new Highcharts.Chart(chartConfig); 
}); 

Ponadto, naprawdę nie trzeba przypisać obiekt wykresu zmiennej - przynajmniej ja nie chciałam.

Mam nadzieję, że to pomoże komuś.