2012-06-12 2 views
18

У меня есть следующие, работает отлично:Предоставление 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

У вас не может быть несколько идентификаторов, но вы можете попробовать «класс». Измените его на class = "port-18" и убедитесь, что вы обновили его на 'success'. –

ответ

18

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

в основном присвоить элемент JQuery переменной:

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

+4

Я пробовал это, но мне не очень повезло. Вот что я пробовал: http://jsfiddle.net/Chmts/ – oshirowanen

+0

Это не сработало для меня. – richardaday

+5

Использование только $ container не будет работать. Как демонстрирует jsfiddle из диаграмм, вы должны указать $ container [0]. –

10

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

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

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

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

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

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

+0

Большое спасибо. Это работает и для меня. – Strabek

Смежные вопросы