Ответ 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]
У меня есть следующее, которое отлично работает:
$(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
заполняется диаграммой, а вторая остается пустой. Как я могу обойти эту проблему?
Да, вы можете. Вот их пример: http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/renderto-jquery/
в основном вы назначаете элемент jQuery переменной:
renderTo: $('.myclass')[0]
Поскольку Ido уже сказал, вы не можете иметь несколько идентификаторов, но вы можете иметь несколько классов.
Мне нужно было сделать следующее:
var $containers = $('.container'),
chartConfig = {
chart: {
renderTo: null,
defaultSeriesType: 'column'
}
};
$containers.each(function(i, e){
chartConfig.chart.renderTo = e;
new Highcharts.Chart(chartConfig);
});
Кроме того, вам действительно не нужно назначать объект Chart переменной - по крайней мере, я этого не хотел.
Надеюсь, это поможет кому-то.