Question

我正在尝试创建一个Highcharts地图，但我无法通过＃13错误，该错误指出无法找到渲染容器。我的所有其他图表都不是地图图表，它使用相同的容器类，但我根本无法使用地图。

传递给initMapChart函数的Config对象（地图图使用与普通图表相同的配置）：

highcharts.config = {
  chart: {
    type: highcharts.getTypeFromId(graph.type)
  },
  plotOptions: {
    series: {
      stickyTracking: false,
        events: {
            click: function (e) {
                this.chart.myTooltip.refresh(e.point, e);
            }
        }
    },
    pie: {
      cursor: 'pointer',
      dataLabels: {
        enabled: true,
        formatter: function() {
            return this.series.isLabelsVisible ? this.y : '';
        }
      },
      showInLegend: true
    },
    line: {
        cursor: 'pointer',
      dataLabels: {
        enabled: true
      }
    },
    area: {
        cursor: 'pointer',
        dataLabels: {
        enabled: true,
        formatter: function() {
          return this.series.isLabelsVisible ? this.y : '';
        }
      }
    },
    areaspline: {
        cursor: 'pointer',
        dataLabels: {
        enabled: true,
        formatter: function() {
          return this.series.isLabelsVisible ? this.y : '';
        }
      }
    },
    column: {
      stacking: false,
        cursor: 'pointer',
        dataLabels: {
        enabled: true,
        formatter: function() {
          return this.series.isLabelsVisible ? this.y : '';
        }
      }
    },
    map: {
      mapData: Highcharts.maps['custom/world'],
      joinBy: ['name'],
      cursor: 'pointer',
      dataLabels: {
        enabled: true
      }
    }
  },
  exporting: {
    buttons: {
      contextButton: {
        enabled: false
      }
    }
  },
    toggleModify: false,
  title: {
    text: ''
  },
  xAxis: {
    categories: null,
        labels: {
      format: graph.span === 0 && graph.isTime && graph.childTarget === null ? '{value:%Y-%m-%d}' : '{value}'
    }
  },
  yAxis: {
    title: {
      text: ''
    },
    labels: {}
  },
  series: null,
  credits: {
    enabled: false
  }
};

我在尝试创建图表之前先等待创建系列，这里也是我设置renderTo属性的地方：

scope.$on('highchartsConfigUpdated', function(e, config) {

    initDataType();
    bindDataTypes();

    var target = element[0].querySelector('.highcharts-target');

    config.chart.renderTo = target;

    if (scope.graph.type === 6) {
      initMapChart(config);
    }
    else {
      initChart(config);
    }
  });

此功能将对所有类型为6的图表运行，这意味着它们是地图：

function initMapChart(config) {

    console.log(config.chart.renderTo);

    new Highcharts.Chart('Map', config, function(chart) {
      initLabels(chart);
      bindLabels(chart);
    });
  };

从控制台日志中我得到了这应该意味着它实际上可以找到元素：

<div id="chart-b2b2d164-b41c-40fc-a739-00cb1bc074ba" class="highcharts-target"></div>

所以我认为问题在于图表本身的实例化，如何在不使用jQuery的情况下创建地图？

尝试创建地图时，Highcharts错误＃13

0 个答案: