用户更新标签后呈现 Highcharts

Question

用户更新标签后呈现 Highcharts

5

我正在尝试创建一个图表生成器。我有用户输入标题和图例位置。我希望用户输入标题，当他们离开（失焦）图表时，图表可以根据他们输入的内容进行更新。

问题是图表只在第一次呈现，但我永远无法再次呈现图表。以下是代码的简要摘要。

$('#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/

- Sean

要使用相同的数据，请执行以下操作。修改chart.options部分。然后将其传递到highcharts中。var chart = Highcharts.chart(chart.options) - Sean

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sean · Accepted Answer

问题已得到解决。详细信息请参见：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();
  }
};