Объект Highcharts не будет работать при заполнении цикла - PullRequest
Новая
       1

Объект Highcharts не будет работать при заполнении цикла

0 голосов
/ 20 ноября 2019

Я делаю своего рода альтернативу детализации в 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. Что мне не хватает?

Я уже выполнил детализацию и не хочу получать рекомендации по выполнению детализации, если это означает необходимость щелкать отдельные точки данных. Я бы хотел, чтобы этот дизайн работал динамически.

1 Ответ

1 голос
/ 21 ноября 2019

Проблема, с которой вы сталкиваетесь, состоит в том, что значение 'i' равно 3, когда срабатывает функция щелчка. Обратите внимание, что цикл завершил работу, объекты были созданы, и переменная останова 'i' как 3 и seriesContainer [3] в вашем случае равна undefined.

Другая проблема заключается в том, что кнопки "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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...