Jquery диаграммы Highchart не работают SetAttribute не является функцией

Question

Я динамически создал новый div для каждого элемента в массиве в своем внутреннем коде asp.net. Каждый из этих элементов содержит уникальный идентификатор, класс с именем boxplot, атрибут с заголовком старшей диаграммы и, наконец, атрибут, который содержит данные диаграммы в формате JSON.

Я пытаюсь использовать javascript для получения значений в этих атрибутах и ​​создания графика для каждого элемента div, зависящего от данных в атрибутах. Ниже мой javascript:

    $('.boxplot').each(function(i, obj) {     

        var desc = $(this).attr("graphdesc");
        console.log(desc);
        var gdata = $(this).attr("graphdata");
        console.log(gdata);


        var chart;
        var type = 'boxplot';
        var data = [JSON.parse(gdata).map(item => parseInt(item))]; //Doesnt work in IE



        $(function () {
            $(this).highcharts({
                chart: { type: type, inverted: true},
                title: { text: desc },
                //subtitle: { text: subTitleText },
                renderTo: this,
                legend: { enabled: false },
                tooltip: {
                    shared: true,
                    crosshairs: true
                },
                plotOptions: {
                    series: {
                        pointWidth: 50
                    }
                },

                xAxis: {
                    visible: false

                },
                yAxis: {

                    visible: true,
                    title: {
                        text: 'Values'
                    },

                    plotLines: [{
                        value: hvtarget,
                        color: 'red',
                        width: 2

                    }]
                }
            });


            chart = $(this).highcharts();
            chart.addSeries({ data: data });

    });

Я пытаюсь запустить это, и я получаю следующую ошибку: исключение jQuery.Deferred: k.setAttribute не является функцией TypeError: k.setAttribute не является функцией

Как мне получить эти высокочастотные диаграммы для отображения графика на основе значений атрибута. Что мне не хватает? Пожалуйста, сообщите, если вам нужно добавить дополнительную информацию.

Answer 1

Структура для графических данных не может выглядеть следующим образом:

<div id=Chart0 class="pagebr boxplot" graphdesc="A Title" graphdata="[\"2\",\"16\",\"15\",\"16\",\"24\"]">

Она должна выглядеть следующим образом:

<div id=Chart0 class="pagebr boxplot" graphdesc="A Title" graphdata="[2, 16, 15, 16, 24]">

строки, где вы используете

$(this).highcharts({ 
chart = $(this).highcharts();

должен ссылаться на реальный объект, который вы перебираете, поэтому они должны выглядеть следующим образом:

$(obj).highcharts({
chart = $(obj).highcharts();

    $('.boxplot').each(function(i, obj) {
      var desc = $(this).attr("graphdesc");
      console.log(desc);
      var gdata = $(this).attr("graphdata");
      console.log(gdata);
      var chart;
      var type = 'boxplot';
      var data = [JSON.parse(gdata).map(item => parseInt(item))]; //Doesnt work in IE

      $(function() {
        $(obj).highcharts({
          chart: {
            type: type,
            inverted: true
          },
          title: {
            text: desc
          },
          //subtitle: { text: subTitleText },
          renderTo: this,
          legend: {
            enabled: false
          },
          tooltip: {
            shared: true,
            crosshairs: true
          },
          plotOptions: {
            series: {
              pointWidth: 50
            }
          },
          xAxis: {
            visible: false
          },
          yAxis: {
            visible: true,
            title: {
              text: 'Values'
            },
            plotLines: [{
              value: 8,
              color: 'red',
              width: 2
            }]
          }
        });
        chart = $(obj).highcharts();
        chart.addSeries({
          data: data
        });
      });
    });

<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>


<div id=Chart0 class="pagebr boxplot" graphdesc="A Title" graphdata='[2, 16, 15, 16, 24]'>

Пример работы JSFiddle: https://jsfiddle.net/ewolden/3skyaeq5/22/