Highcharts Error # 16: wykresy nie wyświetlają się na tej samej stronie

Question

Mam stronę internetową, jedna strona Z powodzeniem dodałem highchart.

Teraz skopiowałem dokładnie ten sam kod do tej samej strony, ale inną stronę asp, ale pierwszy wykres zniknął, a drugi wykres nie jest wyświetlany.

to daje mi błąd:

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' 

jakieś pomysły dlaczego otrzymuję ten.

więc mój kod dla nowego wykresu chcę:

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

wykresie, który pracuje ma następujący kod:

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

rezultat 2. widać na wykresie.

ale wykres najpierw robi,

zarówno kod znajduje się na stronie acsx zaczepienia!

Answer 1

jeśli pójdziesz do Given Error Link

Highcharts Error # 16

Highcharts już zdefiniowane na stronie

Ten błąd zdarza się drugi Highcharts czasowe lub Highstock ładowany jest na tej samej stronie, tak Przestrzeń nazw Highcharts jest już zdefiniowana. Należy pamiętać, że konstruktor Highcharts.Chart i wszystkie funkcje Highcharts są uwzględnione w Highstock, więc jeśli używasz Chart and StockChart w połączeniu, wystarczy załadować plik highstock.js.

Sprawdź, czy skopiowane biblioteki skryptów dla highcharts raz drugi kod powinien zawierać tylko jeden raz:

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

Edycja

Próbujesz pokazać wykresy w samym div jako $('#container') Tutaj pojemnika jest identyfikatorem dla div. Kiedy oba ascx renderują się na stronie, znajdują ten sam element div w kontenerze Id i renderują wykres, który nadpisuje jeden z nich. tak

1. zrobić dwa oddzielne div:

   <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. Remove Script (poniżej) z ASCX i umieścić go w 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. Na wykresie One:

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

   Na wykresie dwa:

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

Answer 2

można wykorzystać w ten sposób, aby owinąć kod, który uruchamia bibliotekę Highcharts.js. :

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

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

} 

Znalazłem go tutaj https://stackoverflow.com/a/5154971 i działa dla mnie.

In this way you don't need to put your script in the MasterPage if you don't want.

Pamiętaj, aby użyć bardzo unikalny nazwę, ponieważ jest to zmienna globalna.

Należy również pamiętać, że konstruktor Highcharts.Chart i wszystkie funkcje Highchartów są zawarte w Highstock, więc jeśli używasz Chart and StockChart w połączeniu, wystarczy załadować plik highstock.js lub możesz go zawinąć w ten sam sposób.