javascript 在用户更新标签后呈现 Highcharts
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9661250/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Render Highcharts after user updated labels
提问by Sean
I am trying to create a chart builder. I have a user inputs for Title and location of the legend. I want a user to type in a title and when the click off (blur) the chart to be updated with what they typed.
我正在尝试创建图表构建器。我有一个用户输入的标题和图例位置。我希望用户输入标题，并在单击关闭（模糊）图表时使用他们输入的内容进行更新。
The problem is the chart renders the first time, however i can never get the char to render again. Here is a quick summary of the code.
问题是图表第一次渲染，但是我永远无法再次渲染图表。这是代码的快速摘要。
$('#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();
}
};
The chart renders the first time and then is just a blank white area the second time. Any ideas? chartData is a variable with all the options in it that renders correctly.
图表第一次呈现，然后第二次只是一个空白的白色区域。有任何想法吗？chartData 是一个变量，其中包含正确呈现的所有选项。
here is a JSFiddle that shows the issue http://jsfiddle.net/zVjrb/3/
这是一个显示问题的 JSFiddle http://jsfiddle.net/zVjrb/3/
回答by Sean
Figured out the Issue. Detailed here: http://highslide.com/forum/viewtopic.php?f=12&t=15255
想通了这个问题。详细在这里：http: //highslide.com/forum/viewtopic.php?f=12&t=15255
Basically the Highcharts.charts function clears the series data from the original options object.
基本上 Highcharts.charts 函数从原始选项对象中清除系列数据。
This is my working code:
这是我的工作代码：
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();
}
};
