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/

Highchart jQuery图表不起作用SetAttribute不是函数

1 个答案: