时间戳

首页 > 解决方案 > 填充循环时，Highcharts 对象将不起作用

javascript - 填充循环时，Highcharts 对象将不起作用

问题描述

我正在做一种替代 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>

我觉得这更像是一个普遍的 JavaScript 问题，而不是 Highcharts 的怪癖。我错过了什么？

我已经进行了向下钻取，如果这意味着必须单击单个数据点，我不想要关于进行向下钻取的建议。我希望这里的设计能够动态工作。

标签： javascripthighcharts

解决方案

您正在努力解决的问题是“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

推荐阅读