为什么Highcharts测试的时候有用,移入项目中就失灵了 Highcharts 柱状图不能显示 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 柱状图: <!-- 加载jquery --><script type="text/javascript" src="js/jquery-1.6.2.js"></script><!-- javascript代码 --><script type="text/javascript">$(function () { $('#container').highcharts({ chart: { type: 'column' }, title: { text: '产品预期收益图' }, credits: { enabled : false }, xAxis: { categories: [ '本产品收益', '同类型产品', '同期限产品', '同投资方向', '货币基金', '一年期定存', 'CPI涨幅' ] }, yAxis: { min: 0, title: { text: '收益率 (%)' } }, tooltip: { headerFormat: '<span style="font-size:10px">{point.key}</span><table>', pointFormat: '<tr><td style="color:{series.color};padding:0">收益率: </td>' + '<td style="padding:0"><b>{point.y:.1f} %</b></td></tr>', footerFormat: '</table>', shared: true, useHTML: true }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } }, series: [ { name: '收益比较', data: [{'color':'#F6BD0F','y':3.6}, {'color':'#AFD8F8','y':8.8}, {'color':'#8BBA00','y':8.5}, {'color':'#FF8E46','y':3.4}, {'color':'#008E8E','y':6.0}, {'color':'#D64646','y':4.5}, {'color':'#8E468E','y':15.0}] },] }); });</script><!-- 加载 highC主js文件 ,--><script src="js/highcharts.js"></script><!-- 加载 exporting ,是highCharts实现打印,下载图片必须的js文件,如果不需要该功能,可不用--><script src="js/exporting.js"></script><!-- 新建一个容器,存放在head部分定义的Chart内容 。这里的id一定是chart : {...}内的renderTo的值--> <div id="container" style="min-width:700px;height:400px"></div> 折线图: <!-- 加载jquery --><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><!-- javascript代码 --><script type="text/javascript"> $(function () { var chart; $(document).ready(function() { //定义一个HighCharts chart = new Highcharts.Chart({ //配置chart选项 chart: { renderTo: 'highcharts1', //容器名,和body部分的div id要一致 type: 'spline' //图表类型,这里选择折线图 }, //配置链接及名称选项 credits: { enabled : true, href : "http://www.52wulian.org", text : "浏览总理:291,IP总数:74 -- 我爱物联网" }, //配置标题 title: { text: '我爱物联网 2012/09/22 访问统计', y:10 //默认对齐是顶部,所以这里代表距离顶部10px }, //配置副标题 subtitle: { text: '数据来源:百度统计', y:30 }, //配置x轴 xAxis: { categories: ['0', '1', '2', '3', '4', '5','6', '7', '8', '9', '10', '11','12', '13','14','15','16','17','18','19','20','21','22','23/点'] }, // 配置y轴 yAxis: { title: { text: '次数(次)' }, labels: { formatter: function() { return this.value +'次' } } }, //配置数据点提示框 tooltip: { crosshairs: true, shared: true }, //配置数据使其点显示信息 plotOptions: { spline : { dataLabels: { enabled: true }, enableMouseTracking: true } }, //配置数据列 series: [{ name: '浏览次数(PV)', er: { symbol: 'square' }, data: [16,10, 8, 0, 0, 0, 2, 1, 5,10,25,34, 8,12,38,22,13,14,11, 8, 8, 5, 8,33]},{ name: 'IP数', er: { symbol: 'diamond' }, data: [ 7, 2, 1, 0, 0, 0, 1, 1, 3, 5, 4, 2, 5, 5, 2, 1, 5, 3, 1, 4, 4, 4, 5, 9] }] }); }); }); </script><!-- 加载 highC主js文件 ,--><script src="js/highcharts.js"></script><!-- 加载 exporting ,是highCharts实现打印,下载图片必须的js文件,如果不需要该功能,可不用--><script src="js/exporting.js"></script><!-- 新建一个容器,存放在head部分定义的Chart内容 。这里的id一定是chart : {...}内的renderTo的值--> <div id="highcharts1" style="min-width:400px;height:400px;"></div> 你加载了 2 个 jquery ?出现冲突了吧?只在开始处保留一个高版本的 一开始加载一个1.6.2版本的,折线图也不显示,加载了1.10.1.min.js的可以出现折线图,不能显示柱状图。 我的jquery版本jQuery v1.9.02个图都能显示<!-- 加载jquery --><script type="text/javascript" src="jquery.min.js"></script><!-- javascript代码 --><script type="text/javascript">$(function () { $('#container').highcharts({ chart: { type: 'column' }, title: { text: '产品预期收益图' }, credits: { enabled : false}, xAxis: { categories: [ '本产品收益', '同类型产品', '同期限产品', '同投资方向', '货币基金', '一年期定存', 'CPI涨幅' ] }, yAxis: { min: 0, title: { text: '收益率 (%)' } }, tooltip: { headerFormat: '<span style="font-size:10px">{point.key}</span><table>', pointFormat: '<tr><td style="color:{series.color};padding:0">收益率: </td>' + '<td style="padding:0"><b>{point.y:.1f} %</b></td></tr>', footerFormat: '</table>', shared: true, useHTML: true }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } }, series: [ { name: '收益比较', data: [{'color':'#F6BD0F','y':3.6}, {'color':'#AFD8F8','y':8.8}, {'color':'#8BBA00','y':8.5}, {'color':'#FF8E46','y':3.4}, {'color':'#008E8E','y':6.0}, {'color':'#D64646','y':4.5}, {'color':'#8E468E','y':15.0}] },] }); });</script><script type="text/javascript"> $(function () { var chart; $(document).ready(function() { //定义一个HighCharts chart = new Highcharts.Chart({ //配置chart选项 chart: { renderTo: 'highcharts1', //容器名,和body部分的div id要一致 type: 'spline' //图表类型,这里选择折线图 }, //配置链接及名称选项 credits: { enabled : true, href : "http://www.52wulian.org", text : "浏览总理:291,IP总数:74 -- 我爱物联网" }, //配置标题 title: { text: '我爱物联网 2012/09/22 访问统计', y:10 //默认对齐是顶部,所以这里代表距离顶部10px }, //配置副标题 subtitle: { text: '数据来源:百度统计', y:30 }, //配置x轴 xAxis: { categories: ['0', '1', '2', '3', '4', '5','6', '7', '8', '9', '10', '11','12', '13','14','15','16','17','18','19','20','21','22','23/点'] }, // 配置y轴 yAxis: { title: { text: '次数(次)' }, labels: { formatter: function() { return this.value +'次' } } }, //配置数据点提示框 tooltip: { crosshairs: true, shared: true }, //配置数据使其点显示信息 plotOptions: { spline : { dataLabels: { enabled: true }, enableMouseTracking: true } }, //配置数据列 series: [{ name: '浏览次数(PV)', er: { symbol: 'square' }, data: [16,10, 8, 0, 0, 0, 2, 1, 5,10,25,34, 8,12,38,22,13,14,11, 8, 8, 5, 8,33]},{ name: 'IP数', er: { symbol: 'diamond' }, data: [ 7, 2, 1, 0, 0, 0, 1, 1, 3, 5, 4, 2, 5, 5, 2, 1, 5, 3, 1, 4, 4, 4, 5, 9] }] }); }); }); </script><!-- 加载 highC主js文件 ,--><script src="http://www.hcharts.cn/demo/js/highcharts.js"></script><!-- 加载 exporting ,是highCharts实现打印,下载图片必须的js文件,如果不需要该功能,可不用--><script src="http://www.hcharts.cn/demo/js/exporting.js"></script><!-- 新建一个容器,存放在head部分定义的Chart内容 。这里的id一定是chart : {...}内的renderTo的值--> <div id="container" style="min-width:700px;height:400px"></div> <div id="highcharts1" style="min-width:400px;height:400px;"></div> Quote: 引用 5 楼 liuxingfffff 的回复:如果不是放到项目中去,我的也有用,就是放我自己的项目当中去,就只会显示折线图,不能显示柱状图。项目中原来有个1.6.2的两个都不能显示,导入1.10.1.min的,就只可以显示折线图 确保项目网页中的文件在浏览器中 是最新的,没有缓存。查看网页是否有js错误。查看网页中所有引用的js文件,是否会有对highchart 和 jquery 有影响的js文件。highchart 版本 和你自己本地的版本 是否一致。查看你的js代码 是否执行。 不一样,测试,就是用txt文档写的,然后放我项目中去就可以 不知道,反正我是把折线图里面的spline全部换成column,然后改下属性,就完美运行了 求教:js 发送邮件 script的疑问 extjs 点击事件 如何验证某栏输入的字符串符合一定格式 用js赋值后的div的怎么求高 在数据库操作中如何选定某天的纪录? 数字怎样转换为字符 请各位大虾帮忙看一段JavaScript代码~~~ 富文本插件CKEDITOR,产生事件后会产生全选效果 头疼 js 聚焦 失焦 问题,高手赐教啊 讨论一个代码写法的问题 关于验证参数
<!-- 加载jquery -->
<script type="text/javascript" src="js/jquery-1.6.2.js"></script>
<!-- javascript代码 -->
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: '产品预期收益图'
},
credits: {
enabled : false
},
xAxis: {
categories: [
'本产品收益',
'同类型产品',
'同期限产品',
'同投资方向',
'货币基金',
'一年期定存',
'CPI涨幅'
]
},
yAxis: {
min: 0,
title: {
text: '收益率 (%)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">收益率: </td>' +
'<td style="padding:0"><b>{point.y:.1f} %</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [ {
name: '收益比较',
data: [{'color':'#F6BD0F','y':3.6}, {'color':'#AFD8F8','y':8.8}, {'color':'#8BBA00','y':8.5}, {'color':'#FF8E46','y':3.4}, {'color':'#008E8E','y':6.0}, {'color':'#D64646','y':4.5}, {'color':'#8E468E','y':15.0}]
},]
});
});
</script>
<!-- 加载 highC主js文件 ,-->
<script src="js/highcharts.js"></script>
<!-- 加载 exporting ,是highCharts实现打印,下载图片必须的js文件,如果不需要该功能,可不用-->
<script src="js/exporting.js"></script>
<!-- 新建一个容器,存放在head部分定义的Chart内容 。这里的id一定是chart : {...}内的renderTo的值-->
<div id="container" style="min-width:700px;height:400px"></div>
<!-- 加载jquery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- javascript代码 -->
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
//定义一个HighCharts
chart = new Highcharts.Chart({
//配置chart选项
chart: {
renderTo: 'highcharts1', //容器名,和body部分的div id要一致
type: 'spline' //图表类型,这里选择折线图
},
//配置链接及名称选项
credits: {
enabled : true,
href : "http://www.52wulian.org",
text : "浏览总理:291,IP总数:74 -- 我爱物联网"
},
//配置标题
title: {
text: '我爱物联网 2012/09/22 访问统计',
y:10 //默认对齐是顶部,所以这里代表距离顶部10px
},
//配置副标题
subtitle: {
text: '数据来源:百度统计',
y:30
},
//配置x轴
xAxis: {
categories: ['0', '1', '2', '3', '4', '5','6', '7', '8', '9', '10', '11','12',
'13','14','15','16','17','18','19','20','21','22','23/点']
},
// 配置y轴
yAxis: {
title: {
text: '次数(次)'
},
labels: {
formatter: function() {
return this.value +'次'
}
}
},
//配置数据点提示框
tooltip: {
crosshairs: true,
shared: true
},
//配置数据使其点显示信息
plotOptions: {
spline : {
dataLabels: {
enabled: true
},
enableMouseTracking: true
}
},
//配置数据列
series: [{
name: '浏览次数(PV)',
er: {
symbol: 'square'
},
data: [16,10, 8, 0, 0, 0, 2, 1, 5,10,25,34,
8,12,38,22,13,14,11, 8, 8, 5, 8,33]},{
name: 'IP数',
er: {
symbol: 'diamond'
},
data: [ 7, 2, 1, 0, 0, 0, 1, 1, 3, 5, 4, 2,
5, 5, 2, 1, 5, 3, 1, 4, 4, 4, 5, 9]
}]
});
});
});
</script>
<!-- 加载 highC主js文件 ,-->
<script src="js/highcharts.js"></script>
<!-- 加载 exporting ,是highCharts实现打印,下载图片必须的js文件,如果不需要该功能,可不用-->
<script src="js/exporting.js"></script>
<!-- 新建一个容器,存放在head部分定义的Chart内容 。这里的id一定是chart : {...}内的renderTo的值-->
<div id="highcharts1" style="min-width:400px;height:400px;"></div>
出现冲突了吧?
只在开始处保留一个高版本的
jQuery v1.9.0
2个图都能显示<!-- 加载jquery -->
<script type="text/javascript" src="jquery.min.js"></script>
<!-- javascript代码 -->
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: '产品预期收益图'
},
credits: {
enabled : false
},
xAxis: {
categories: [
'本产品收益',
'同类型产品',
'同期限产品',
'同投资方向',
'货币基金',
'一年期定存',
'CPI涨幅'
]
},
yAxis: {
min: 0,
title: {
text: '收益率 (%)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">收益率: </td>' +
'<td style="padding:0"><b>{point.y:.1f} %</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [ {
name: '收益比较',
data: [{'color':'#F6BD0F','y':3.6}, {'color':'#AFD8F8','y':8.8}, {'color':'#8BBA00','y':8.5}, {'color':'#FF8E46','y':3.4}, {'color':'#008E8E','y':6.0}, {'color':'#D64646','y':4.5}, {'color':'#8E468E','y':15.0}]
},]
});
});
</script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
//定义一个HighCharts
chart = new Highcharts.Chart({
//配置chart选项
chart: {
renderTo: 'highcharts1', //容器名,和body部分的div id要一致
type: 'spline' //图表类型,这里选择折线图
},
//配置链接及名称选项
credits: {
enabled : true,
href : "http://www.52wulian.org",
text : "浏览总理:291,IP总数:74 -- 我爱物联网"
},
//配置标题
title: {
text: '我爱物联网 2012/09/22 访问统计',
y:10 //默认对齐是顶部,所以这里代表距离顶部10px
},
//配置副标题
subtitle: {
text: '数据来源:百度统计',
y:30
},
//配置x轴
xAxis: {
categories: ['0', '1', '2', '3', '4', '5','6', '7', '8', '9', '10', '11','12',
'13','14','15','16','17','18','19','20','21','22','23/点']
},
// 配置y轴
yAxis: {
title: {
text: '次数(次)'
},
labels: {
formatter: function() {
return this.value +'次'
}
}
},
//配置数据点提示框
tooltip: {
crosshairs: true,
shared: true
},
//配置数据使其点显示信息
plotOptions: {
spline : {
dataLabels: {
enabled: true
},
enableMouseTracking: true
}
},
//配置数据列
series: [{
name: '浏览次数(PV)',
er: {
symbol: 'square'
},
data: [16,10, 8, 0, 0, 0, 2, 1, 5,10,25,34,
8,12,38,22,13,14,11, 8, 8, 5, 8,33]},{
name: 'IP数',
er: {
symbol: 'diamond'
},
data: [ 7, 2, 1, 0, 0, 0, 1, 1, 3, 5, 4, 2,
5, 5, 2, 1, 5, 3, 1, 4, 4, 4, 5, 9]
}]
});
});
});
</script>
<!-- 加载 highC主js文件 ,-->
<script src="http://www.hcharts.cn/demo/js/highcharts.js"></script>
<!-- 加载 exporting ,是highCharts实现打印,下载图片必须的js文件,如果不需要该功能,可不用-->
<script src="http://www.hcharts.cn/demo/js/exporting.js"></script>
<!-- 新建一个容器,存放在head部分定义的Chart内容 。这里的id一定是chart : {...}内的renderTo的值-->
<div id="container" style="min-width:700px;height:400px"></div> <div id="highcharts1" style="min-width:400px;height:400px;"></div>
查看网页是否有js错误。
查看网页中所有引用的js文件,是否会有对highchart 和 jquery 有影响的js文件。
highchart 版本 和你自己本地的版本 是否一致。
查看你的js代码 是否执行。