Highcharts对象在填充循环后将不起作用

Question

我在Highcharts中提供了一种向下钻取的替代方法，该方法允许用户单击按钮来更改显示的图表系列，而不是单击数据点。为此，我将在图表的“导出”部分动态创建Highcharts按钮。单击时，按钮应更改图表上显示的系列。

当按钮对象不在循环中时，此方法起作用。您可以单击圆圈以更改显示的系列：

const series0 = [{ name: "blu", data: [39.11, 18.64, -1.6, 14.18, 8.83, 12.31, -6.03], color: "blue" }, { name: "bla", data: [27.97, 1.57, -1.01, 13.84, 8.01, 17.57, 2.41], color: "black" }];
const series1 = [{ name: "ora", data: [25.37, 22.29, 8.22, 17.51, -34.73, 5.44, -11.07], color: "orange" }, { name: "gr", data: [25.89, -3.97, 14.24, 13.3, 5.84, 35.23, -12.61], color: "green" }];
const series2 = [{ name: "red", data: [55.37, 2.29, 22, 75, -37, 5, -7], color: "red" }, { name: "sil", data: [29, -97, 14, 13, 5, 33, -11], color: "silver" }];
const series3 = JSON.parse(JSON.stringify(series0));

const nameArray = ['1', '2', '3'];

const seriesContainer = [];
seriesContainer.push(series1);
seriesContainer.push(series2);
seriesContainer.push(series3);

var buttonContainerTest = new Object();

buttonContainerTest.back = {
  x: -34,
  onclick: function () {
    var chart = this;
    chart.update({ series: series3 }, true, true);
    $('.backButton').hide();
    $('.myButton').show();
    chart.redraw();
  },
  text: 'back',
  theme: {
    class: "backButton highcharts-button highcharts-button-normal"
  }
};

var xButtonPosition = -34;

buttonContainerTest['button' + nameArray[0]] = {
  x: -34,
  onclick: function () {
    var chart = this;
    chart.update({ series: seriesContainer[0] }, true, true);
    $('.backButton').show();
    $('.myButton').hide();
    chart.redraw();
  },
  symbol: 'circle',
  symbolFill: Highcharts.getOptions().colors[0],
  theme: {
    class: "myButton highcharts-button highcharts-button-normal"
  }
};

buttonContainerTest['button' + nameArray[1]] = {
  x: -54,
  onclick: function () {
    var chart = this;
    chart.update({ series: seriesContainer[1] }, true, true);
    $('.backButton').show();
    $('.myButton').hide();
    chart.redraw();
  },
  symbol: 'circle',
  symbolFill: Highcharts.getOptions().colors[1],
  theme: {
    class: "myButton highcharts-button highcharts-button-normal"
  }
};

var buttonObjectTest = {
  buttons: buttonContainerTest
};

console.log(buttonObjectTest);

$(function () {
    var chart = new Highcharts.Chart({
        
        chart: {
            renderTo: 'container'
        },        
        
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },        
        
        series: series0,
        
        exporting: buttonObjectTest
    }, 

    );
});

$(function() {
   $('.backButton').hide();
}, false);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 400px"></div>

但是，当在循环中创建完全相同的对象时，这不起作用。将对象打印到控制台并不能帮助我看到区别：

const series0 = [{ name: "blu", data: [39.11, 18.64, -1.6, 14.18, 8.83, 12.31, -6.03], color: "blue" }, { name: "bla", data: [27.97, 1.57, -1.01, 13.84, 8.01, 17.57, 2.41], color: "black" }];
const series1 = [{ name: "ora", data: [25.37, 22.29, 8.22, 17.51, -34.73, 5.44, -11.07], color: "orange" }, { name: "gr", data: [25.89, -3.97, 14.24, 13.3, 5.84, 35.23, -12.61], color: "green" }];
const series2 = [{ name: "red", data: [55.37, 2.29, 22, 75, -37, 5, -7], color: "red" }, { name: "sil", data: [29, -97, 14, 13, 5, 33, -11], color: "silver" }];
const series3 = JSON.parse(JSON.stringify(series0));

const nameArray = ['1', '2', '3'];

const seriesContainer = [];
seriesContainer.push(series1);
seriesContainer.push(series2);
seriesContainer.push(series3);

var buttonContainerTest = new Object();

buttonContainerTest.back = {
  x: -34,
  onclick: function () {
    var chart = this;
    chart.update({ series: series3 }, true, true);
    $('.backButton').hide();
    $('.myButton').show();
    chart.redraw();
  },
  text: 'back',
  theme: {
    class: "backButton highcharts-button highcharts-button-normal"
  }
};

var xButtonPosition = -34;

for (i = 0; i < seriesContainer.length; i++) {
  var name = 'button' + nameArray[i];
  buttonContainerTest[name] = {
    x: xButtonPosition,
    onclick: function () {
      var chart = this;
      chart.update({ series: seriesContainer[i] }, true, true);
      $('.backButton').hide();
      $('.myButton').show();
      chart.redraw();
    },
    symbol: 'circle',
    symbolFill: Highcharts.getOptions().colors[i],
    theme: {
      class: "myButton highcharts-button highcharts-button-normal"
    }
  };
  xButtonPosition -= 20;
};

var buttonObjectTest = {
  buttons: buttonContainerTest
};

console.log(buttonObjectTest);

$(function () {
    var chart = new Highcharts.Chart({
        
        chart: {
            renderTo: 'container'
        },        
        
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },        
        
        series: series0,
        
        exporting: buttonObjectTest
    }, 

    );
});

$(function() {
   $('.backButton').hide();
}, false);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 400px"></div>

我感到这比Highcharts怪癖更像是一般的JavaScript问题。我想念什么？

我已经进行了向下钻取，如果需要单击各个数据点，则不希望在进行向下钻取方面提供建议。我希望这里的设计能够动态工作。

Answer 1

您正在努力解决的问题是，在触发点击功能时，'i'值等于3。请注意，循环完成的工作，对象已创建，并且'i'停止变量为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
    }
  };

请参见演示：jsFiddle