高图表未显示
Highcharts not showing up
我有一个.tpl文件，我想在其中添加几个图表。这些值将从 MySQL 数据库中获取。对于图表，我正在使用Highcharts。
这是我希望我的图表看起来完全像它的小提琴，当然值会改变。
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-basic/
所以我的代码是：
<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 中使用它时，它在那里也不起作用。
<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>
你很可能没有包括jquery。我将确切的代码（没有额外的脚本标签）粘贴到 jsfiddle 中，它起作用了。
http://jsfiddle.net/3zgjgvhu/
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
确保在发生错误时始终先尝试 jQuery 文档就绪函数。
<head>
<script src="/js/jquery-3.2.1.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
/ / code
});
</script>
请按给定顺序将此脚本添加到 head 标题中。
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">
<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>
相关文章：
- 在高图表中，每x步只显示标签
- 高图表不显示来自csv文件的数据
- 高图表在点单击时显示工具提示
- 同时在高图表中显示多个工具提示
- 日期不能显示在高图表上
- 当间隔之间的范围高时，在高图表中显示y轴上的整个值
- 使用节点下载高图表数据，但不在浏览器中显示
- 隐藏并显示高图表图例
- 为什么我的addSeries(在高图表中）只显示系列的名称，而不显示实际的饼图本身
- 在高图表中显示一个状态的总时间之和
- 高图表错误 #15，图形显示正确
- 如何在高图表的基本柱形图中隐藏/显示列
- 动态显示实时高图表数据，无需警报
- 由于未定义的序列，不显示高图表最近点工具提示
- 不显示高图表单点数据
- 格式化 JSON 以显示高图表的格式
- 在其他文件中提交表单后显示高图表
- 显示高图表并使用 php 从 mysql 数据库中获取图表的数据
- 如何在点击按钮时隐藏/显示高图表的滚动条和范围选择器
- 从远程元素突出显示高图表系列
