首页 文章

无法动态更新javascript中的高图

提问于
浏览
0

Cannott动态更新高图 .

我有高潮 . 当用户点击按钮时,我想打开模态窗口,显示相同的高图,但更新了一些字段(系列和类别数据) .

我做了什么:

  • 创建对象“选项”

var options = {} ; - 包含highcharts的所有数据的obj .

  • 使用选项创建主要高图:

var chartWithTopCategories = new Highcharts.Chart(options);

  • 点击已更新图表的按钮打开模式:
$(‘#modalId’).on( "click", function() {  
    	options.xAxis.categories = listOfAllCategories;
        options.series.data = listOfAllValues;
        options.chart.renderTo = ‘div-id-inside-modal;
        console.log(options); //4.  All options updated successfully here
        // 5.Then I trying to create new highchart, using options below (I tried both):
        //$('div-id-inside-modal').highcharts(options); 
        var chart = new Highcharts.Chart(options); // ALL FiELDS ARE UPDATED< BUT NEW CHART IS NOT DISPLAYED. OLD ONE IS DISPLAYED INSTEAD
        chart.redraw(); // Tried with and without redraw
     }

所以,问题在于,当我尝试在打开的模态中创建新的高图时,它不会创建具有更新选项的新hoghchart,它仍然呈现在页面上没有模态的SAME高图 . 即使我是console.log新的高图对象,它仍然具有更新值的所有字段

1 回答

  • 0

    我找到了解决方案:这个:

    options.series.data = listOfAllValues;
    

    应改为:

    options.series[0].data = listOfAllValues;
    

相关问题