Рендеринг Highcharts после обновления пользователем меток

Я пытаюсь создать построитель диаграмм. У меня есть пользовательский ввод для заголовка и местоположения легенды. Я хочу, чтобы пользователь вводил заголовок, а при нажатии (размытии) диаграмма обновлялась с тем, что он набрал.

Проблема в том, что диаграмма отображается в первый раз, однако я никогда не смогу снова отобразить символ. Вот краткий обзор кода.

$('#legendlocation-select').blur(function updateChartLegend(){
console.log($('#legendlocation-select').val());
if($('#legendlocation-select').val()==='none'){
    chartData.legend.enabled = 'false';
}else{
    chartData.legend.enabled = 'true';
    chartData.legend.align = $('#legendlocation-select').val();
}
renderChart();
});
function renderChart(){
if(chart == undefined){
    console.log("First Draw");
    chart = new Highcharts.Chart(chartData);
}else{
    console.log("Redraw");
    chart.destroy();
    chart = new Highcharts.Chart(chartData);
    chart.redraw();
}
};

Диаграмма отображается в первый раз, а затем во второй раз представляет собой пустую белую область. Есть идеи? chartData — это переменная со всеми параметрами, которая отображается правильно.

вот JSFiddle, который показывает проблему http://jsfiddle.net/zVjrb/3/


javascript highcharts
person Sean    schedule 12.03.2012    source источник
comment
Чтобы использовать те же данные, сделайте следующее. Измените раздел chart.options. Затем передайте это в highcharts. var chart = Highcharts.chart(chart.options)   -  person Sean    schedule 12.03.2012

Ответы (1)


arrow_upward
10
arrow_downward

Разобрался с проблемой. Подробнее здесь: http://highslide.com/forum/viewtopic.php?f=12&t=15255

По сути, функция Highcharts.charts очищает данные серии из исходного объекта параметров.

Это мой рабочий код:

var chart;
var chartData = { /* you chart data goes here */ };
$('#legendlocation-select').blur(function updateChartLegend(){
  console.log($('#legendlocation-select').val());
  if($('#legendlocation-select').val()==='none'){
    chart.options.legend.enabled = false;
  }else{
    chart.options.legend.enabled = true;
    chart.options.legend.align = $('#legendlocation-select').val();
  }
  renderChart();
});

function renderChart(){
  //console.log(chartData);
  if(chart == undefined){
    console.log("First Draw");
    chart = new Highcharts.Chart(chartData);
  }else{
    console.log("Redraw");
    chart.options.chart.animation = false;
    chart = new Highcharts.Chart(chart.options);
    chart.render();
  }
};
person Sean    schedule 12.03.2012
comment
У меня были аналогичные проблемы при загрузке highcharts в диалоговое окно jquery-ui - в итоге я решил ее, очистив div диалога, специально вызвав $('.highcharts-container').removeClass(). Надеюсь, это поможет кому-то еще и сэкономит им час или около того, потраченный впустую на меня. - person Ross; 29.01.2013