Highchart jquery图表不工作SetAttribute不是一个函数

Question

我已经在我的asp.net后端代码中为数组中的每个项动态创建了一个新的div。这些div中的每一个都包含一个唯一的ID，一个名为boxplot的类，一个具有highchart标题的属性，最后一个包含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

graphdata的结构看起来不像这样：

<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/