Highcharts不能在网站上工作
highcharts can't work in website
我是javascript的新手。我想通过在我的网站使用高图绘制一个堆栈条形图。我在这里复制演示代码,然后将其粘贴到我的php localhost中,但我的网站中没有highcharts。有什么问题吗?
代码↓
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#container").highcharts({
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
series: [{
name: 'John',
data: [9, 10, 4, 7, 2]
}, {
name: 'Jane',
data: [8, 5, 3, 2, 1]
}, {
name: 'Joe',
data: [7, 7, 4, 2, 5]
}]
});
});
</script>
</head>
<body>
<h2 align="center">HighCharts.js demo</h2>
Where's the plot?<br>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
只需更改调用jquery的脚本,并使其在highcharts之前加载。这是必要的,因为Highcharts是建立在jquery之上的,如果没有在Highcharts源代码之前加载它,它将导致错误。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>
相关文章:
- "此网站似乎使用滚动链接定位效果.这可能不能很好地与异步平移一起工作;
- 代理一个网站能够在iframe中进行所见即所得编辑-它是如何工作的
- 使用HTML和任何服务器端语言(PHP,.net,ruby)制作的网站是否可以在每个具有浏览器的设备上工作
- Toggle已停止在我的网站上工作
- 谷歌脚本-从网站论坛解析HTML-并将数据写入工作表
- 我可以'我似乎没有得到我的网站'移动导航开始工作
- JavaScript网站与工作实例
- 如何在node.js的帮助下使用网站在localhost上工作
- 如何使Asp.net网站同时在IE 11(非可比模式)和IE 8中工作
- 缓存以使我的网站离线是't工作
- jsFiddle工作,网站JS不工作
- 代码在 jsfiddle 中工作,但在我的网站上不起作用
- 我的jQuery在JSFiddle中工作,但不能在我的网站上工作!我做错了什么
- CSS 在基于 URL 上工作,但不在网站的其他页面中使用.代码点火器
- JavaScript不能在一个网站上工作,但在另一个网站上很好
- 如何让Jsfiddles在网站上工作
- 我的Wordpress网站上的所有jQuery脚本都无法正常工作
- 当我将我的网站移动到在线测试服务器时,“添加到购物车”按钮停止工作
- “赞”按钮和“赞”框不仅显示在我网站的某些页面上.其余部分工作正常
- 如何使Facebook喜欢检测在我的网站上工作