Javascript 如何将Highchart放入html页面
非常新的问题,我对html和highcharts之类的东西非常陌生。首先,我制作了这个test.php来显示图表Javascript 如何将Highchart放入html页面,javascript,php,jquery,html,highcharts,Javascript,Php,Jquery,Html,Highcharts,非常新的问题,我对html和highcharts之类的东西非常陌生。首先,我制作了这个test.php来显示图表 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Highcharts Example</title> <script type="text/javascr
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
$.getJSON("data.php", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Disease',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Patient Count'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: json
});
});
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
海图示例
$(函数(){
var图;
$(文档).ready(函数(){
$.getJSON(“data.php”,函数(json){
图表=新的高点图表。图表({
图表:{
renderTo:'容器',
键入:“行”,
marginRight:130,
marginBottom:25
},
标题:{
文字:“疾病”,
x:-20/中心
},
副标题:{
文本:“”,
x:-20
},
xAxis:{
类别:[一月、二月、三月、四月、五月、六月、七月、八月、九月、十月、十一月、十二月]
},
亚克斯:{
标题:{
文本:“患者计数”
},
绘图线:[{
值:0,
宽度:1,
颜色:'#808080'
}]
},
工具提示:{
格式化程序:函数(){
返回“+this.series.name+”
+
this.x+':'+this.y;
}
},
图例:{
布局:“垂直”,
对齐:“右”,
垂直排列:“顶部”,
x:-10,
y:100,
边框宽度:0
},
系列:json
});
});
});
});
使用apache服务器运行时,将显示图表。现在我想让这个图表出现在我的网站上。所以我要做的就是把javascript代码放到html页面上,就像这样
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> </script>
<script src="js/highcharts.js"></script>
<script src="js/highcharts-more.js"></script>
<script src="js/exporting.js"></script>
<script src="js/jquery-1.8.3.min.js"></script>
<title>Test Dash</title>
</head>
<body>
<div style="width:500px"></div>
<script type="text/javascript">
//My highchart script
$(function () {
var chart;
$(document).ready(function() {
$.getJSON("data.php", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Disease',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Patient Count'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: json
});
});
});
});
</script>
</body>
</html>
试跑
//我的海图脚本
$(函数(){
var图;
$(文档).ready(函数(){
$.getJSON(“data.php”,函数(json){
图表=新的高点图表。图表({
图表:{
renderTo:'容器',
键入:“行”,
marginRight:130,
marginBottom:25
},
标题:{
文字:“疾病”,
x:-20/中心
},
副标题:{
文本:“”,
x:-20
},
xAxis:{
类别:[一月、二月、三月、四月、五月、六月、七月、八月、九月、十月、十一月、十二月]
},
亚克斯:{
标题:{
文本:“患者计数”
},
绘图线:[{
值:0,
宽度:1,
颜色:'#808080'
}]
},
工具提示:{
格式化程序:函数(){
返回“+this.series.name+”
+
this.x+':'+this.y;
}
},
图例:{
布局:“垂直”,
对齐:“右”,
垂直排列:“顶部”,
x:-10,
y:100,
边框宽度:0
},
系列:json
});
});
});
});
但图表不会出现。我甚至尝试在html页面中插入一个简单的、不使用SQL的图表,但还是失败了
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/highcharts-more.js"></script>
<script src="js/exporting.js"></script>
<script src="js/jquery-1.8.3.min.js"></script>
<title>Test Dash</title>
</head>
<body>
<div id="container" style="width:500px"></div>
<script src="js/highcharts.js" type="text/javascript">
//example script from highchart website
$(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>
</body>
</html>
试跑
//highchart网站的示例脚本
$(函数(){
$(‘容器’).highcharts({
图表:{
类型:'bar'
},
标题:{
正文:“水果消费”
},
xAxis:{
类别:[‘苹果’、‘香蕉’、‘橙子’]
},
亚克斯:{
标题:{
文字:“吃水果”
}
},
系列:[{
姓名:'简',
数据:[1,0,4]
}, {
姓名:'约翰',
数据:[5,7,3]
}]
});
});
我怎样才能使这些高图表出现在我的网站上?如果这对你们来说是个愚蠢的问题,我非常抱歉 两者之间的区别在于,在第一个示例中,图表正在查找一个DIV,即
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
请注意,is具有id=“container”
,您的HighCharts代码正在查找它:renderTo:'container',
您只需将上述DIV添加到希望图表显示的代码中。两者的区别在于,在第一个示例中,您有一个图表正在查找的DIV,即
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
请注意,is具有id=“container”
,您的HighCharts代码正在查找它:renderTo:'container',
您只需将上述DIV添加到您希望图表显示的代码中。您应该将其添加到希望图表显示的位置:
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
您应该在希望图表显示的位置添加以下内容:
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
首先,您错过了目标div id“container”。。其次,您需要清理代码,我注意到jquery在代码中包含了两次。下面是JSON示例的工作代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Dash</title>
</head>
<body>
<div id="container" style="width:500px;height:500px;"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.8.3.min.js"><\/script>')</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script>
//My highchart script
$(function () {
var chart;
$(document).ready(function() {
// $.getJSON("data.php", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Disease',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Patient Count'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
// });
});
});
</script>
</body>
试跑
window.jQuery | | document.write(“”)
//我的海图脚本
$(函数(){
var图;
$(文档).ready(函数(){
//$.getJSON(“data.php”,函数(json){
图表=新的高点图表。图表({
图表:{
renderTo:'容器',
键入:“行”,
marginRight:130,
marginBottom:25
},
标题:{
文字:“疾病”,
x:-20/中心
},
副标题:{
文本:“”,