Highcharts 问题更新图表类型：不识别 highcharts 函数

Question

我正在尝试将我当前拥有的高位图表更新为新的图表类型，但是我很难这样做。

我在我的页面中嵌入了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) 出现此错误的原因是什么？如何修复它才能正确更新？

提前致谢！

Answer 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);

Answer 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>

Highcharts 问题更新图表类型：不识别 highcharts 函数

Highcharts issue updating chart type: not recognizing highcharts functions

javascript

jquery

charts

highcharts