Highcharts 更新图表类型问题：无法识别 highcharts 函数答案

【问题标题】：Highcharts issue updating chart type: not recognizing highcharts functionsHighcharts 更新图表类型问题：无法识别 highcharts 函数
【发布时间】：2015-05-27 20:17:49
【问题描述】：

我正在尝试将我必须使用的当前高图表更新为新的图表类型，但是我在这样做时遇到了困难。

我已经在我的页面中嵌入了 javascript，下面是下面

<script>


chart = $(function () {
    $('#chart_example').highcharts({
        chart: {
            type: 'line'
        },
        title: {
            text: 'Traffic'
        },
        xAxis: {
            categories: ['November', 'December', 'January']
        },
        yAxis: {
            title: {
                text: 'Views'
            }
        },
        series: [{
            name: 'Hello',
            data: [50, 30, 60]
        }]
    });
  });
</script>

我在页面底部下面有以下两个脚本

<script src="http://code.highcharts.com/highcharts.js"></script>
....
<script src="custom_script"></script>
</body>
</html>

在自定义脚本中，我想将 highcharts 库从折线图更新为条形图。我查看了 API，发现了一个 update method 这需要新的选择。所以我尝试了以下方法：

$(document).on('click' , '#button' , function() {
     var options = new Object();
      options.chart = new Object();
      options.chart.type = 'bar';
      options.chart.renderTo = 'container';
      chart.update(options, true);
      //the container the chart is in
      $('#chart_example').show();
...

但是我得到了

Uncaught TypeError: chart.update is not a function(anonymous function) @ custom_script=1:41m.event.dispatch @ jquery.min.js:3m.event.add.r.handle @ jquery.min.js:3

我的想法是 javascript 的顺序是错误的，但我似乎有 javascript 的正确顺序。那么我的问题是：

1) 此图表变量设置是否正确？我的理解是，使用 var 未设置的变量会自动成为全局变量。
2) 这个错误的原因是什么？如何修复它才能正确更新？

提前谢谢你！

【问题讨论】：

标签： javascript jquery charts highcharts

【解决方案1】：

http://jsfiddle.net/2j1g200g/29/

var options = {
        chart: {
            type: 'line',
            renderTo: 'chart_example'
        },
        title: {
            text: 'Traffic'
        },
        xAxis: {
            categories: ['November', 'December', 'January']
        },
        yAxis: {
            title: {
                text: 'Views'
            }
        },
        series: [{
            name: 'Hello',
            data: [50, 30, 60]
        }]
    };
chart = new Highcharts.Chart(options);
options.chart.type = 'bar';
chart = new Highcharts.Chart(options);

【讨论】：

【解决方案2】：

运行这个，它应该得到你想要的。我添加了一个用于演示的按钮。

chartOptions = {
  chart: {
    type: 'line'
  },
  title: {
    text: 'Traffic'
  },
  xAxis: {
    categories: ['November', 'December', 'January']
  },
  yAxis: {
    title: {
      text: 'Views'
    }
  },
  series: [{
    name: 'Hello',
    data: [50, 30, 60]
  }]
};

$('#chart_example').highcharts(chartOptions);


$(document).on('click' , '#button' , function() {
  chartOptions.chart.type = 'bar';    
  $('#chart_example').highcharts(chartOptions);
});

<button id="button">rechart</button>
<div id="chart_example"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

【讨论】：