高图未显示
[英]Highcharts not showing up
问题描述
我有一个.tpl文件，我想向其中添加一些图表。 这些值将从MySQL数据库中获取。 对于图表，我正在使用Highcharts。
这是我想要我的图表看起来完全像小提琴的小提琴，当然值会改变。
所以我的代码是：
<head>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May'
]
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0]
}]
});
});
<script>
</script>
</body>
当我将其放在.tpl文件中时，它什么也没有显示。 谁能说我在做什么错。 我应该添加最新版本的jquery还是其他？
我还有一件事要提，当我尝试在单独的jsfiddle中使用它时，它在那里也无法正常工作。
5 个解决方案
解决方案1
4 2014-11-26 05:47:09
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May'
]
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0]
}]
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
解决方案2
1 2014-11-25 13:46:09
您最有可能不包含jquery。 我在jsfiddle中粘贴了确切的代码（没有额外的脚本标签），它可以正常工作。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
解决方案3
0 2017-09-20 15:57:58
当发生错误时，请务必始终先尝试使用jQuery文档就绪功能 。
<head>
<script src="/js/jquery-3.2.1.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
/ / code
});
</script>
解决方案4
-1 2014-11-25 15:01:13
请按给定顺序将此脚本添加到标题中。
src =“ http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js”>
src =“ http://code.highcharts.com/highcharts.js”>
src =“ http://code.highcharts.com/modules/exporting.js”>
解决方案5
-1 2014-11-26 05:33:43
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script>
$(function () {
var issueData = {"WAR":13,"VTO":14,"EXWH":33};
var pieData = [];
for (i in issueData) {
pieData.push([i,issueData[i]] );
}
$('#container').highcharts({
chart: {
type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Total tickets for each project'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
data: pieData
}]
});
});
$(function () {
var issueData = {"bug":8,"false":5};
var pieData = [];
for (i in issueData) {
pieData.push([i,issueData[i]] );
}
$('#container1').highcharts({
chart: {
type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'WAR DOne status '
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
data: pieData
}]
});
});
$(function () {
var issueData = {"true":3,"false":11};
var pieData = [];
for (i in issueData) {
pieData.push([i,issueData[i]] );
}
$('#container2').highcharts({
chart: {
type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'VTO DOne status '
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
data: pieData
}]
});
});
$(function () {
var issueData = {"true":8,"false":6};
var pieData = [];
for (i in issueData) {
pieData.push([i,issueData[i]] );
}
$('#container3').highcharts({
chart: {
type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'EXWH DOne status '
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
data: pieData
}]
});
});
</script>
<title>Charts</title>
</head>
<body>
<div id="container" style="height: 400px"></div>
<div id="container1" style="height: 400px"></div>
<div id="container2" style="height: 400px"></div>
<div id="container3" style="height: 400px"></div>
</body>
</html>
Angular.js，Highcharts，Phantomjs PDF打印机-图形未显示
[英]Angular.js, Highcharts, Phantomjs PDF printer - graphs not showing up
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.