사용자가 레이블을 업데이트 한 후 하이 차트 렌더링

Question

차트 작성기를 만들려고합니다. 전설의 제목과 위치에 대한 사용자 입력이 있습니다. 사용자가 제목을 입력하고 클릭하여 차트를 수정하면 입력 한 내용으로 업데이트됩니다.

문제는 차트를 처음 렌더링하는 것입니다. 그러나 다시 렌더링 할 char을 얻을 수는 없습니다. 다음은 코드의 간단한 요약입니다.

$('#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는 올바르게 렌더링되는 모든 옵션이 포함 된 변수입니다. 여기

문제를 파악 문제 http://jsfiddle.net/zVjrb/3/

Answer 1

에게 보여주는 JSFiddle이다. 여기에서 자세히 : 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(); 
    } 
};