我正在尝试创建一个图表生成器。我有用户输入的图例标题和位置。我希望用户输入标题,当单击(模糊)时,图表将根据他们输入的内容进行更新。
问题是图表第一次渲染,但是我永远无法让字符再次渲染。这是代码的快速摘要。
$('#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 是一个变量,其中包含可以正确呈现的所有选项。
这是一个显示问题的 JSFiddlehttp://jsfiddle.net/zVjrb/3/
找出问题所在。详细说明在这里:
基本上 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();
}
};
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)