高图点击显示更大的图形

Highcharts on click show larger graph

本文关键字：图形 显示 高图点      更新时间：2023-09-26

我正在设置一种方法，可以通过取消隐藏页面'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:

经过更多的调试，很明显，传递给DrawLargeChart()的options对象在第一次点击和随后的点击中是不一样的。我的代码中没有任何东西改变LargeChartOptions结构

<标题>编辑2:

我发现这是一个按值传递/按引用传递错误。LargeChartOptions是通过引用传入的，在第一次单击后不再存在。有没有一种方法可以按值传递它?我不想在函数参数中输入LargeChartOptions(比我在这里输入的大得多)，以防将来我改变任何东西

编辑3//我想明白了:

我知道问题出在哪里了。$(target).highcharts(options)函数实际上修改 options对象并设置options.series = null <标题> 的解决方案

我修改了DrawLargeChart函数，通过使用options_buffer = $.extend(true,{},options);来创建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)

我找到了答案(在原来的帖子，但复制在这里):

我修改了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)

相关文章：