我该如何修复Highcharts错误#13？

Question

我该如何修复Highcharts错误#13？

14

我使用Highcharts，让用户可以关闭和打开图表页面并重新绘制图表，在某些情况下会出现错误，我该如何修复它？谢谢。

这是我的代码：

 function populateGraph(graph1data1,graph1data2,id,time,bottomText,tickinterval){
$(function () {
  $('#'+id).highcharts({
      chart: {
          type: 'line'
      },
      xAxis: {
        tickWidth: 0,
        categories: ['1,2,3,4']
      },
      yAxis: {
        gridLineColor: '#fff',
          title: {
              text: ''
          },
          labels: {
              formatter: function() {
                  return '';
              }
          }              
      },
      navigation: {
        buttonOptions: {
            enabled: false
        }
    },
      series: [{
          name: 'This ',
          data: [1,2,3,4],
          color: '#1e71ef'     
      }, {
          name: 'Last ',
          data: [5,6,7,8],
          color:'#dfe0e1'
      }]
  });
});
}
}




       function loadOnlineDashboardChannel(channel){
          $.ajax({
          type: "get",
          dataType: 'html',
          data: {},
          url: "/companies/2/online_dashboard_channel",
          success: function(data, status){ 
          var obj = JSON.parse(data);
          var template_data = { 
            measures_list:   
              obj.measures         
          };
          $(function() { 
        var tmplHTML_measures = '{{#measures_list}} <div class="col-lg-11  col-lg-offset-1"><p class="indicator-title gray-bottom-border">{{name}}</br></p><div><p><span class="font30px">{{total}} </span> Total {{name}}<br><span class="green-text">{{increase}}%</span> from last <span class="metric_time"></span></p></div><div class="graph-header"><h3>{{this_interval}} </h3><p>New {{name}}</p><p class="percentage-graph green-text">{{percentag e}}%<p></div><div id={{graph_id}} class="graph"></div> </div>{{/measures_list}}';   
          Handlebars.render = function(tmpl, data){data = data || {};return                                                       Handlebars.compile(tmpl)(data);};  
      $("#template").empty().append(Handlebars.render(tmplHTML_measures,template_data) );
      var data_graph;
      for ( var i = 0; i < obj.measures.length; i++ ) {
        data_graph=obj.measures[i];
                      populateGraph(data_graph.this_interval_detail,data_graph.last_interval_detail,data_graph.graph_id,time,obj.bottom_graph_text,parseInt($('#timeframe-select').find(":selected").attr('interval')) );
      }              
     })


  },
  error: function(error) {

}
});

return this;
};

我在这部分使用handlebar，在 var tmplHTML_measures 中我创建div，在for循环中调用函数来绘制图表。

谢谢，我重复尝试有时可以完美地工作，但有时会出现错误＃13。

- Marion

嗨，我修改了我的帖子并添加了一些代码，有时候可以工作，有时候不行，元素ID没问题，谢谢。 - Marion

3

如果Highcharts报错，那么jQuery选择器$('#id')返回的是空值。我原本猜测你没有将.highcharts调用包含在$(function ()中，但是在上面的代码中你已经这样做了。尽管你在末尾有一个不属于的额外的}。你确定div id是唯一的吗？ id="id"似乎是一个不太好的命名约定。 - Mark

是的，我的ID是唯一的，我使用一个独特的名称动态创建它，并为此使用Handlebar。 - Marion

1

因此，在highcharts中，您还需要拥有这个名称，div的id需要与您用于创建highcharts的选择器名称相同。 - Sebastian Bochan

11个回答

6

我曾经遇到过同样的问题，并通过使用正确的容器解决了它：

在我的情况下，我使用了以下内容：

// Use Meteor.defer() to create chart after DOM is ready:
Meteor.defer(function() {
  // Create standard Highcharts chart with options:
  Highcharts.chart('Charts', {
    chart: {
      renderTo: 'container',
        type: 'column',
        options3d: {
            enabled: true,
            alpha: 15,
            beta: 15,
            depth: 50,
            viewDistance: 25
        }
    },....
  }.....
}

Template.body.helpers({
  createChart: function () {...}

在 HTML 文件中：

<div id='Charts'>
    {{createChart}}
</div>

我从Highcharts找到了解决方法：http://forum.highcharts.com/viewtopic.php?f=9&t=15610 致敬。

- Gabriela Vaca Guzman G.

虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅链接的答案可能会失效。- 来自审查 - tarzanbappa

非常感谢您的建议。 :) 正在更新答案。 - Gabriela Vaca Guzman G.

这就是我们需要在wdiv id =“”内指定柱状图或折线图等内容。 - famas23

4

当我把调用script放在HTML元素后面时，错误问题得到了解决。

例如：

<div id="container"></div>

<script>    
Highcharts.chart('container', {
// some script here
});
</script>

此外，如果您查看高级图表网站，它会显示以下内容：

    This error occurs if the chart.renderTo option is misconfigured so that
Highcharts is unable to find the HTML element to render the chart in.

https://www.highcharts.com/errors/13

- Aamir Shahzad

1

分类需要是一个集合，它是这样的：

categories: xaxis

将其更改为：

categories: ['xaxis']

一些数据字段需要用单引号括起来，像这样：

data: 'blue'

这里有一个没有任何错误的 fiddle 给您：

http://jsfiddle.net/MVcBe/

我祝你余下的工作顺利。 :)

顺便说一句，有时候我觉得从Highcharts网站上编辑一个可用的fiddle并将其调整为所需内容会更容易。像这样的:

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/

- hutchonoid

抱歉，那不是我的问题。我接收到xaxis作为参数，我用静态的xaxis改变了代码，我的问题与id有关，有时可以找到id，有时找不到，有时完美地工作，有时会给我这个错误，错误＃13 http://www.highcharts.com/errors/13 - Marion

@Marion，我觉得代码看起来都很好，没有错误。请问你能否发布一下你的HTML代码？ - hutchonoid

1

也许有点晚了，但是Highcharts示例中容器的默认名称为“container”。浏览器似乎不喜欢这个名称，可能是名称冲突，将其更改为“Chart”就可以解决问题。

- Michael Couck

0

我也遇到了相同的错误代码，但在我的情况下，原因是我的数据过大而无法支持。

- huang botao

这篇帖子最好作为评论而不是答案发布。一旦您拥有足够的声望，您将能够评论任何帖子；相反，提供不需要询问者澄清的答案。 - Til

我应该删除这个答案吗？ - huang botao

0

Highcharts 无法找到指定的ID。通常发生在库尝试渲染图表时，但是该div在DOM中尚未创建。

您需要调试代码并尝试查找信息，以确定该元素是否存在于您的网站上，当Highcharts需要使用它时。

- Sathiamoorthy

0

Highcharts错误＃13发生在HighCharts引用的DOM元素未找到时。

因此，为了调试此错误，您必须在调用HighCharts回调函数之前检查DOM元素的可用性。对于您的情况，请尝试控制台记录 $（'#'+id）的结果。如果它为空，请确保重新检查HighCharts中引用的html元素ID，并且不应存在重复的ID。

- Mundruku

0

我在文档准备就绪函数后加载了脚本代码，它运行得很好。

$(document).ready(function(){
});

- G.Ashok Kumar

0

这是一个老问题，但在我看来，没有一个答案真正令人满意。

我建议在渲染图表之前检查图表 div 是否存在。

if($('#'+id).length){ $('#'+id).highcharts({});}

- user3468711

这只是不会在控制台中显示错误。 - Jay

正确，错误是因为图表div在DOM中不存在。这可能是由许多原因引起的问题。如果需要，您可以在else语句中以适合您的应用程序的任何方式解决该问题。 - user3468711

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jay · Accepted Answer

我遇到了同样的错误，我所知道的是当HighCharts.js尝试访问DOM中不存在的元素时会出现错误#13。

我是如何解决的？我确保在我的目标元素创建在DOM中后才调用HightCharts方法。棒极了！！！一切都正常工作。