12

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

现在我将完全相同的代码复制到同一页面，但不同的 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>

第二张图表显示。

但第一张图表没有，

两个代码都在不同的 acsx 页面中！

4

2 回答 2

27

如果你去给定错误链接

Highcharts 错误 #16

页面中已定义的 Highcharts

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

检查您是否第二次复制了 highcharts 的脚本库，您的代码应该只包含一次：

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

编辑

您试图在与$('#container')此处容器相同的 div 中显示图表是 div 的 ID。当两个 ascx 在页面中呈现时，它会找到具有 Id 容器的相同 div 并呈现覆盖其中一个的图表。所以

  1. 制作两个单独的 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. 从 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. 对于图表一：

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

    对于图表二：

     $('#container2').highcharts({//other code
于 2013-06-28T11:59:26.070 回答
2

您可以使用这种方式来包装运行 Highcharts.js 库的代码。：

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

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

}

我在这里找到它https://stackoverflow.com/a/5154971它对我有用。

这样，如果您不想要，您就不需要将脚本放在 MasterPage 中。

请务必使用一个非常独特的名称，因为它是一个全局变量。

另外请记住，Highcharts.Chart 的构造函数和 Highcharts 的所有功能都包含在 Highstock 中，因此如果您将 Chart 和 StockChart 组合运行，您只需要加载 highstock.js 文件，也可以用相同的方式包装它.

于 2016-11-10T16:20:36.987 回答