在用户更新标签后渲染Highcharts [英] Render Highcharts after user updated labels

问题描述

我正在尝试创建图表生成器。我有一个用户输入标题和图例的位置。我想要一个用户输入一个标题，当点击（模糊）图表更新他们输入的内容。

问题是图表呈现第一个时间，但是我永远不能再获取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是一个变量，其中包含所有正确呈现的选项。

这里是一个显示问题的JSFiddle http://jsfiddle.net/zVjrb/3/

解决方案

找出问题。这里详细说明： http://highslide.com/forum/viewtopic.php

基本上，Highcharts.charts函数会从原始选项对象中清除系列数据。

这是我的工作代码：

  var chart; 
 var chartData = {/ *您将图表数据传到这里* /}; 
 $（'＃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（）; 
} ）; 
 
函数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（）; 
} 
}; 
  

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.

here is a JSFiddle that shows the issue http://jsfiddle.net/zVjrb/3/

解决方案

Figured out the Issue. Detailed here: http://highslide.com/forum/viewtopic.php?f=12&t=15255

Basically the Highcharts.charts function clears the series data from the original options object.

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();
  }
};

这篇关于在用户更新标签后渲染Highcharts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！