web-dev-qa-db-fra.com

Comment puis-je réparer l'erreur # 13 de Highcharts?

J'utilise Highchart afin que l'utilisateur puisse fermer et ouvrir la page de graphique et redessiner le graphique. Dans certains cas, donnez-moi cette erreur.

 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;
};

J'utilise le guidon donc dans cette partie dans var tmplHTML_measures Je crée le div, dans le for que j'appelle la fonction pour dessiner le graphique.

Merci, je répète parfois que cela fonctionne parfaitement et parfois échouer donnez-moi l'erreur # 13

javascripthtmlhighchartshighstockhandlebars.js
11
Marion

J'ai rencontré la même erreur et ce que j'ai appris c'est que l'erreur n ° 13 se produit lorsque HighCharts.js tente d'accéder à un élément qui n'est pas présent dans le DOM.

Comment je l'ai corrigé? Je me suis assuré que la méthode HightCharts est appelée uniquement après la création de mon élément ciblé dans le DOM. Bingo !!!! Tout a bien fonctionné.

11
Jay

J'ai eu le même problème et l'ai corrigé en utilisant le bon conteneur:

Dans mon cas, j'ai utilisé ce qui suit:

// 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 () {...}

et dans le fichier HTML:

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

J'ai trouvé le correctif chez Highcharts: http://forum.highcharts.com/viewtopic.php?f=9&t=15610

Cordialement.

6
Gabriela Vaca Guzman G.

Les catégories doivent être une collection, c'était comme ça:

categories: xaxis

Changez-le en ceci:

categories: ['xaxis']

Certains champs de données doivent être placés entre guillemets simples, comme ceci:

data: 'blue'

Voici un violon sans aucune erreur pour vous:

http://jsfiddle.net/MVcBe/

Bonne chance au reste. :)

ps Je trouve parfois plus facile de modifier un violon en marche à partir du site Highcharts et de l’adapter à vos besoins. Comme celui-ci:

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

1
hutchonoid

Assurez-vous également que "highcharts-more.js" est déclaré dans votre code HTML.

<script src="https://code.highcharts.com/highcharts-more.js"></script>
0
lecorbu

J'ai chargé les codes de script après la fonction de préparation du document, et cela a bien fonctionné.

$(document).ready(function(){
});
0
G.Ashok Kumar

Pour moi, l'erreur était résolue lorsque j'ai placé l'appelant script après l'élément HTML.

Comme;

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

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

Aussi, si vous vérifiez sur le site graphique haut il dit:

    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

0
Aamir Shahzad