2013-06-28 3 views
7

У меня есть веб-сайт, на одной странице я успешно добавил highchart.Ошибка Highcharts # 16: диаграммы, не показывающиеся на той же странице

Теперь я скопировал точно такой же код на ту же страницу, но на другой странице asp, но первый график исчез, а второй график не отображается.

он дает мне ошибку:

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' 

любые идеи, почему я получаю это.

мой код для новой диаграммы я хочу:

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

диаграмму, которая работает имеет следующий код:

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

2-го диаграмма показывает.

но первая диаграмма оленья кожа,

как код на diffrent странице acsx!

ответ

21

если вы идете в Given Error Link

Highcharts Error # 16

Highcharts уже определены на странице

Эта ошибка происходит во второй раз Highcharts или Highstock загружается в одной и той же странице, так пространство имен Highcharts уже определено. Имейте в виду, что конструктор Highcharts.Chart и все возможности Highcharts включены в Highstock, поэтому, если вы используете Chart и StockChart в комбинации, вам нужно загрузить файл highstock.js.

скопирована

Проверьте ли вы библиотеку скриптов для Highcharts второй раз ваш код должен содержать только один раз:

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

Редактировать

Вы пытаетесь показать графики в одном DIV, как $('#container') Здесь контейнер это Id для div. Когда оба ascx визуализируются на странице, он находит один и тот же div с контейнером Id и отображает диаграмму, которая переопределяет одну из них. так

  1. сделать два отдельных дивы:

    <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. Удалить скрипт (после) из ASCX и поместить его в 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. Для диаграммы One:

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

    Для диаграммы Два:

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

yh, у меня есть один раз только ... так что это значит –

+0

, так что ошибка все еще происходит? поместите свой код в сообщение. –

+0

Я загрузил свой код –

1

Вы можете использовать этот способ, чтобы обернуть код, который запускает библиотеку Highcharts.js. :

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

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

} 

Я нашел его здесь https://stackoverflow.com/a/5154971, и он работает для меня.

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

Обязательно использовать очень уникальное имя, так как это глобальная переменная.

Также имейте в виду, что конструктор Highcharts.Chart и все функции Highcharts включены в Highstock, поэтому, если вы используете Chart и StockChart в комбинации, вам нужно только загрузить файл highstock.js, или вы можете его обернуть таким же образом.