web-dev-qa-db-fra.com

Highcharts Error # 16: les graphiques ne sont pas affichés sur la même page

j'ai un site Web, une page, j'ai ajouté avec succès un highchart.

maintenant, j'ai copié exactement le même code sur la même page, mais la page asp diffrent, mais le premier graphique a disparu et le 2ème graphique ne montre pas.

cela me donne une erreur:

Uncaught Highcharts error #16: www.highcharts.com/errors/16 highcharts.js:16
Uncaught SyntaxError: Unexpected token ILLEGAL Dashboard.aspx:657
Uncaught TypeError: Object [object Object] has no method 'highcharts' Dashboard.aspx:405
Uncaught TypeError: Object [object Object] has no method 'draggable'

des idées pourquoi je reçois ceci.

donc mon code pour le nouveau graphique que je veux:

 <script type="text/javascript"
$(function () { 
 $('#container').highcharts({
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Fruit Consumption'
    },
    xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
        title: {
            text: 'Fruit eaten'
        }
    },
    series: [{
        name: 'Jane',
        data: [1, 0, 4]
    }, {
        name: 'John',
        data: [5, 7, 3]
    }]
});
});​
></script>

le graphique qui fonctionne a le code suivant:

 <script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>



  <script type="text/javascript">

   $(function() {

       $('#container').highcharts({
           chart: {
               type: 'column'
           },
           title: {
               text: 'Chart'
           },
           xAxis: {
           categories: array1
           },
           yAxis: {
               title: {
                   text: 'aWH'
               }
           },
           tooltip: {
               pointFormat: "Value: {point.y:.1f} mm"
           },

           series: [{

               name: '2011-2012',
               color: '#0000FF',
               data: array
           },
           {

               name: '2012-2013',
               color: '#92D050',
               data: array3
           },


             {

                 color: '#FF0000',
                 name: '2013-2014',
                 data: array2
}]
       });

   });

</script>

le 2ème graphique montre.

mais le premier tableau ne le fait pas, 

les deux codes sont dans différentes pages acsx!

javascriptasp.nethighcharts
10
m ali

si vous allez sur Given Error Link

Highcharts Error # 16

Highcharts déjà définis dans la page

Cette erreur se produit la deuxième fois que Highcharts ou Highstock est chargé sur la même page. L'espace de noms Highcharts est déjà défini. N'oubliez pas que le constructeur Highcharts.Chart et toutes les fonctionnalités de Highcharts sont inclus dans Highstock. Par conséquent, si vous exécutez une combinaison graphique et StockChart, il vous suffit de charger le fichier highstock.js.

Vérifiez si vous avez copié la bibliothèque de scripts pour les hiérarchies deux fois que votre code ne doit contenir qu'une seule fois:

<script src="http://code.highcharts.com/highcharts.js"></script>

Modifier

Vous essayez d'afficher des diagrammes dans le même div que $('#container') Le conteneur indiqué ici est l'id de div. Lorsque les deux ascx sont rendus dans une page, ils trouvent la même div avec le conteneur Id et rendent le graphique qui en remplace un. alors

  1. Faites deux divs séparés:

    <div id="container1" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<div id="container2" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

  2. Supprimez le script (suivant) de ascx et mettez-le dans MasterPage.

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>

  3. Pour le graphique 1:

    $('#container1').highcharts({//other code

    Pour le graphique deux:

     $('#container2').highcharts({//other code
25
Zaheer Ahmed

Vous pouvez utiliser cette méthode pour envelopper le code qui exécute la bibliothèque Highcharts.js.

if (!window.HighchartsUniqueName) {
  window.HighchartsUniqueName = true;

  // .. your code which runs Highcharts.js library here ... 

}

Je l'ai trouvé ici https://stackoverflow.com/a/5154971 et cela fonctionne pour moi.

De cette manière, vous n'avez pas besoin de mettre votre script dans MasterPage si vous ne le souhaitez pas.

Veillez à utiliser un très unique nom, car il s’agit d’une variable globale.

N'oubliez pas non plus que le constructeur Highcharts.Chart et toutes les fonctionnalités de Highcharts sont inclus dans Highstock. Par conséquent, si vous exécutez une combinaison graphique et StockChart, il vous suffit de charger le fichier highstock.js ou de l'envelopper de la même manière. .

1
Nikolay Bolonin