javascript - 点击 Highcharts 显示大图

我正在设置一种方法，通过取消隐藏页面“ overlay” 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的DrawLargeChart()对象在第一次单击和随后的单击中是不同的。我的代码中没有任何东西可以改变LargeChartOptions结构

编辑2：

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

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

我想出了问题所在。 $(target).highcharts(options)函数实际上是修改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);

}

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

最佳答案

我找到了答案（在原始帖子中，但复制在这里）：

我修改了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只是对该变量的引用-是的Javascript）

关于javascript - 点击 Highcharts 显示大图，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25444881/