点击上的Highcharts显示更大的图表

Question

我设置了一种方法，可以在我的网页上放大小图表，方法是取消隐藏页面＆＃39; overlay＆＃39; div并在其中创建一个次要的，更大的图表，其中的数据与点击的图表相同。

function DrawSmallChart() {

chart_data = [1, 2, 3, 4, 5];

LargeChartOptions = {
    series: [{
        name: 'Data',
        data: chart_data
    }],
};

SmallChartOptions = {
    series: [{
        name: 'Data',
        data: chart_data
    }],
    events: {
        click = function (e) { DrawLargeChart(LargeChartOptions); }
    }
};

$('#smallchart-div-container').highcharts(SmallChartOptions);
}

function DrawLargeChart(options) {

chart_container_div = document.getElementById("graph-div-id");
chart_container_div.style.display = ""
$('#graph-div-id').off();
$("#graph-overlay-graph").highcharts('StockChart', options);

}

当我点击按钮时，我有另一个隐藏此div的功能。

我第一次点击页面加载时的小图表，大图表显示所有数据都很好。第二次单击它时，图表显示但没有数据。

我已经使用调试器来浏览正在发生的事情并且我已经确切地发现了问题所在，但我无法弄清楚如何解决它。

我第一次点击图表时，DrawLargeChart函数会被options.series = <Array containing my series object with chart_data>调用。第二次使用DrawLargeChart调用options.series = null。

当我刷新页面时，它是相同的 - 首次点击工作，后续点击不是。我怀疑它与chart_data变量...

有关

非常感谢任何帮助

编辑1：

经过一些调试后，很明显传递给options的{​​{1}}对象在第一次点击时与后续点击次数不同。我的代码中没有任何内容正在更改DrawLargeChart()结构

编辑2：

我发现这是传递值/传递引用错误。 LargeChartOptions通过引用传入，第一次单击后不再存在。有没有办法按值传递它？我宁愿不必输入LargeChartOptions（比我在这里输入的要大得多）到函数参数中，以防我将来更改任何内容

编辑3 //我已经弄清楚了：

我弄清楚问题是什么。 LargeChartOptions函数实际修改选项对象并设置$(target).highcharts(options)

解决方案

我修改了options.series = null函数，使用DrawLargeChart

创建options的本地副本

options_buffer = $.extend(true,{},options);

通过创建function DrawLargeChart(options) { chart_container_div = document.getElementById("graph-div-id"); options_buffer = $(target).highcharts(options); chart_container_div.style.display = "" $('#graph-div-id').off(); $("#graph-overlay-graph").highcharts('StockChart', options_buffer); } ，highcharts函数无法修改options_buffer（因为LargeChartOptions只是对该变量的引用 - yay Javascript）

Answer 1

我找到答案（原帖但在此复制）：

我修改了DrawLargeChart函数，使用options_buffer = $.extend(true,{},options);

创建选项的本地副本

function DrawLargeChart(options) {

chart_container_div = document.getElementById("graph-div-id");
options_buffer = $(target).highcharts(options);
chart_container_div.style.display = ""
$('#graph-div-id').off();
$("#graph-overlay-graph").highcharts('StockChart', options_buffer);

}

通过创建options_buffer，highcharts函数无法修改LargeChartOptions（因为options只是对该变量的引用 - yay Javascript）