Javascript Highcharts对象赢得'；在循环中填充时不工作

我正在做一种替代Highcharts中的向下搜索的方法，它允许用户单击按钮来更改显示的图表系列，而不是单击数据点。为了做到这一点，我在图表的“导出”部分动态创建Highcharts按钮。单击按钮时，应更改图表上显示的序列

当按钮对象不是在循环中创建时，此操作有效。您可以单击圆圈以更改显示的系列：

const series0=[{name:“blu”，数据：[39.11,18.64，-1.6,14.18,8.83,12.31，-6.03]，颜色：“blue”}，{name:“bla”，数据：[27.97,1.57，-1.01,13.84,8.01,17.57,2.41]，颜色：“black”}；
const series1=[{name:“ora”，数据：[25.37,22.29,8.22,17.51，-34.73,5.44，-11.07]，颜色：“橙色”}，{name:“gr”，数据：[25.89，-3.97,14.24,13.3,5.84,35.23，-12.61]，颜色：“绿色”}；
常量序列2=[{名称：“红色”，数据：[55.37,2.29,22,75，-37,5，-7]，颜色：“红色”}，{名称：“sil”，数据：[29，-97,14,13,5,33，-11]，颜色：“银色”}]；
const series3=JSON.parse（JSON.stringify（series0））；
常量nameArray=['1'，'2'，'3']；
常量序列容器=[]；
序列容器推送（序列1）；
序列容器推送（序列2）；
序列容器推送（序列3）；
var buttonContainerTest=新对象（）；
buttonContainerTest.back={
x:-34，
onclick:function（）{
var图表=此；
更新（{series:series3}，true，true）；
$（'.backButton'）.hide（）；
$（'.myButton'）.show（）；
chart.redraw（）；
},
文本：“返回”，
主题：{
类：“backButton highcharts按钮highcharts按钮normal”
}
};
变量xButtonPosition=-34；
buttonContainerTest['button'+nameArray[0]]={
x:-34，
onclick:function（）{
var图表=此；
更新（{series:seriescanner[0]}，true，true）；
$（'.backButton'）.show（）；
$（'.myButton'）.hide（）；
chart.redraw（）；
},
符号：'圆'，
symbolFill:Highcharts.getOptions（）.colors[0]，
主题：{
类别：“myButton highcharts button highcharts button normal”
}
};
buttonContainerTest['button'+nameArray[1]]={
x:-54，
onclick:function（）{
var图表=此；
更新（{series:seriescanner[1]}，true，true）；
$（'.backButton'）.show（）；
$（'.myButton'）.hide（）；
chart.redraw（）；
},
符号：'圆'，
symbolFill:Highcharts.getOptions（）.colors[1]，
主题：{
类别：“myButton highcharts button highcharts button normal”
}
};
var buttonObjectTest={
按钮：按钮容器测试
};
console.log（buttonObjectTest）；
$（函数（）{
var图表=新的Highcharts.图表({
图表：{
renderTo:“容器”
},        
xAxis：{
类别：[一月、二月、三月、四月、五月、六月、七月、八月、九月、十月、十一月、十二月]
},        
系列：系列0，
导出：buttonObjectTest
}, 
);
});
$（函数（）{
$（'.backButton'）.hide（）；
}，假）
您正在努力解决的问题是，单击功能触发时，“i”值等于3。请注意，循环已完成作业，对象已创建，“i”stop变量作为3，在您的情况下，seriesContainer[3]等于未定义

另一个问题是按钮的“this”指的是图表，而不是按钮本身，因此很难找到哪个按钮被触发

作为一种解决方案，我可以建议在创建类名时将当前的“I”值添加到类名中，并处理事件以检测单击了哪个按钮。见下文：

  buttonContainerTest[name] = {
    x: xButtonPosition,
    onclick: function(e) {
        var chart = this,
                seriesNumberAr = e.target.parentNode.className.animVal.split(''),
            seriesNumberVal = seriesNumberAr[seriesNumberAr.length - 1];

      chart.update({
        series: seriesContainer[seriesNumberVal]
      }, true, true);
      $('.backButton').hide();
      $('.myButton').show();
      chart.redraw();
    },
    symbol: 'circle',
    symbolFill: Highcharts.getOptions().colors[i],
    theme: {
      class: "myButton highcharts-button highcharts-button-normal" + i
    }
  };

请参阅演示：
非常感谢您的帮助。该代码在这种情况下运行良好。然而，我对它的工作方式有点模糊，我想更好地理解它。如果你能找到一个好的资源来学习像这样的事件，那将是很有帮助的。此外，我不明白为什么即使激活Jquery，后退按钮也不能工作。不过，我遇到的最大问题是，当我使用真实数据时，即使是按值复制的数据，在单击几下之后，序列也会出现格式错误。不幸的是，我无法用虚拟数据复制这些内容，问题可能必须是一篇新文章。@Volunter-我认为最好的学习资源之一是尽可能多地使用官方文档（如），并试图理解它-关于后退按钮-似乎以这种方式创建的按钮需要具有相同的类，见：回到你的数据问题-恐怕在你重新制造问题之前我无法提供帮助哦，你的“后退”按钮的隐藏和显示被颠倒了。这是您的示例，按照我希望的方式工作，没有任何问题：。谢谢你提供的信息。我理解不能帮助解决系列畸形问题。这似乎只发生在与我的真实数据的后退按钮连接的系列中。如果可以复制，我会更新。好的，我在等演示。有趣。Boost模块会禁用图表的一些功能，比如动画，也许动画破坏了你的图表-我只能在不调试的情况下猜测。。。如果你能重现这个问题-返回给我们。我们愿意帮助-海图支持团队！