![](/img/trans.png)
[英]Multiple charts with same data not loading in same page: Highcharts
[英]Highcharts Error #16: charts not showing on the same page
我有一个网站,一个页面我已成功添加了一个高图。
现在我将完全相同的代码复制到同一页面,但不同的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页面!
如果你去给定错误链接
Highcharts错误#16
已在页面中定义的Highcharts
第二次在同一页面中加载Highcharts或Highstock时会发生此错误,因此已经定义了Highcharts命名空间。 请记住Highcharts.Chart构造函数和Highcharts的所有功能都包含在Highstock中,因此如果您组合运行Chart和StockChart,则只需加载highstock.js文件。
检查是否第二次复制脚本库for highcharts,代码应该只包含一次:
<script src="http://code.highcharts.com/highcharts.js"></script>
编辑
您试图在与$('#container')
相同的div中显示图表。这里的容器是div的Id。 当ascx在页面中呈现时,它会找到与Id容器相同的div,并呈现覆盖其中一个的图表。 所以
制作两个独立的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>
从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>
对于图表一:
$('#container1').highcharts({//other code
对于图表二:
$('#container2').highcharts({//other code
您可以使用这种方式来包装运行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文件或者你可以用同样的方式包装它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.