然后 返回到一般处理程序 ，将转换后的json数据 respon.write，然后 在ajax 的success 获取date 然后 json循环到 highcharts 里的字段
基本实现方法如下：
1、设置 plotOptions.column.showCheckbox 为ture，目的是显示checkbox
plotOptions: {column:{
showCheckbox:true,
}
}
2、设置column的checkboxClick事件，设置该series显示与隐藏
plotOptions: {column:{
events :{
checkboxClick: function(event) {
if(event.checked==true) {
this.show()
}
else {
this.hide()
}
},
}
}
}
给你完整的代码
<!DOCTYPE HTML》<!-- highcharts 学习交流294191384--><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.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
var options = {
chart: {
renderTo: 'container',
type: 'column',
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[500, 'rgb(240, 240, 255)']
]
},
spacingBottom:30,
zoomType:'x'
},
title: {
text: 'sdsd',
y:30,
style :{
color:'red',
fontSize:'25px'
},
margin :20
},
credits:{
enabled:false
},
xAxis: {
title :{
text:'sdsd',
align:'middle'
},
margin: 100,
},
yAxis: [{
title: {
text: 'sdsd'
}
}],
plotOptions: {
column:{
dataLabels: {
enabled: true
},
animation:false,
lineWidth:3,
selected:true,
zIndex:10,
showCheckbox:true,
selected:true,
events :{
checkboxClick: function(event) {
if(event.checked==true) {
this.show()
}
else {
this.hide()
}
},
legendItemClick:function(event) {//return false 即可禁用LegendIteml
return false
}
}
}
},
legend:{
floating :true,
align: 'left',
verticalAlign: 'bottom',
x:60,
y:15
},
series: [{
yAxis:0,
name:'sd',
}]
}
$(document).ready(function(){
options.xAxis.categories = [1,2,3,4,5,6]
options.series[0].data = [1,2,3,3,2,1]
var char = new Highcharts.Chart(options)
$("button").click(function(){
options.xAxis.categories = [1,2,3,4,5,6]
options.series[0].data = [10,2,5,2,9,1]
//options.series[0].pointStart = 2
var series1 = {
yAxis:0,
name:'1111',
data:[2,9,1,10,2,5]
}
char = new Highcharts.Chart(options)
char.addSeries(series1)
})
})
</script>
</head>
<body>
<div id="container" style="min-width: 310px height: 400px margin: 0 auto"></div>
<button>change</button>
</body>
</html>
解决方法：
1、将x轴时间角度调整，效果如下
具体设置在：
xAxis : {
labels:{
x:15,
y:35,
rotation:45
}
},
其中rotation表示倾斜角度，并可以通过x和y调整位置
2、将时间截断，比如只保留日期，而不保留年和月，这个是在后台程序控制
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）