Рендеринг HighCharts для класса вместо id?

У меня есть следующее, которое отлично работает:

$(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'
                    }
                });

            }
        });
    }
});

Где HTML выглядит примерно так:

<div id="portlet_content_18">

Пользователь может динамически выбирать, какой portlet s/он хочет на экране. S/He также может выбрать один и тот же portlet на экране более одного раза для сравнения.

Итак, если HTML заканчивается:

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

Только первая div заполняется диаграммой, а вторая остается пустой. Как я могу обойти эту проблему?

Ответ 1

Да, вы можете. Вот их пример: http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/renderto-jquery/

в основном вы назначаете элемент jQuery переменной:

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

Ответ 2

Поскольку Ido уже сказал, вы не можете иметь несколько идентификаторов, но вы можете иметь несколько классов.

Мне нужно было сделать следующее:

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

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

Кроме того, вам действительно не нужно назначать объект Chart переменной - по крайней мере, я этого не хотел.

Надеюсь, это поможет кому-то.