Highcharts错误＃16：图表没有显示在同一页面上 [英] Highcharts Error #16: charts not showing on the same page

问题描述

我有一个网站，一个网页我已经成功添加了一个highchart。

i have a website, one page i have successfully added an highchart.

现在我复制完全相同的code到同一个页面，但不同势ASP页面，但第一张图已经消失，第二个图表没有显示。

now i copied exactly the same code to the same page, but diffrent asp page, but the first chart has disappeared and the 2nd chart is not showing.

这是给我的错误：

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' 

任何想法，为什么我得到这一点。

any ideas why am getting this.

所以我的code为新图，我想：

so my code for the new chart i want:

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

这是工作表具有以下code：

the chart that is working has the following code:

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

第二个图所示。

但第一个图表犯规，

两者code在不同势acsx页面！

both code is in diffrent acsx page!

推荐答案

如果你去定错误链接

Highcharts错误＃16

Highcharts Error #16

在页面中已经定义Highcharts

此错误发生在第二时间Highcharts或Highstock在同一页面加载，所以Highcharts命名空间已定义。请记住，在Highcharts.Chart构造函数和Highcharts的所有功能都包含在Highstock，所以如果你在运行的组合图和StockChart，你只需要加载highstock.js文件。

This error happens the second time Highcharts or Highstock is loaded in the same page, so the Highcharts namespace is already defined. Keep in mind that the Highcharts.Chart constructor and all features of Highcharts are included in Highstock, so if you are running Chart and StockChart in combination, you only need to load the highstock.js file.

检查是否复制用于highcharts第二次脚本库中的code应该只包含一个时间：

Check whether you copied the scripts library for highcharts second time your code should contain only one time:

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

修改

您正试图表现出相同的div图表为 $（'＃集装箱'）这里容器是ID为股利。当两个ASCX在页面呈现它找到ID容器相同的DIV和渲染图的是哪个覆盖之一。所以

You are trying to show charts in same div as $('#container') Here container is the Id for div. When both ascx render in a page it find the same div with Id container and render the chart which override one of it. so

1. 请两个单独的div：

1. Make two separate divs:

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

从ASCX删除脚本（以下），并把它放在母版：

Remove script(following) from ascx and put it in 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>

有关图表一：

For chart One:

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

有关图表二：

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

这篇关于Highcharts错误＃16：图表没有显示在同一页面上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！