highcharts与数据库
① highcharts怎么获取数据库的值显示在图表上
highcharts API你没问题吧,即用假数据可以生产图表不?运渗如果没肆悄氏问题,用Ajax请求后台数据库,然后把数据替上裂散就行了。
② highcharts怎么以x轴的值作为条件查询数据库,结果显示在tooltip中
highcharts对象的tooltip属性此盯可以设置相关提示信息,在highcharts对象中加入如下庆旁代码即可:
tooltip:{
//在此方法中可以得到x轴以及y轴的信息,同时也包含了整个series上的数据信息
formatter:function(){
return"x轴的值是:"+this.x+"<br/>y轴的值是:"+this.y;
}
}
把formatter中的相关代码换成与数据森差和库交互取得数据的方法即可展示在tooltip中
③ 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();
}
},
}
}
}
给你完整的代码
<!DOCTYPEHTML》<!--highcharts学习交流294191384-->
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>HighchartsExample</title>
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<scriptsrc="http://code.highcharts.com/highcharts.js"></script>
<scripttype="text/javascript">
varoptions={
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){//returnfalse即可禁用LegendIteml
returnfalse;
}
}
}
},
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];
varchar=newHighcharts.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;
varseries1={
yAxis:0,
name:'1111',
data:[2,9,1,10,2,5]
};
char=newHighcharts.Chart(options);
char.addSeries(series1);
});
});
</script>
</head>
<body>
<divid="container"style="min-width:310px;height:400px;margin:0auto"></div>
<button>change</button>
</body>
</html>
④ highcharts绘图,怎么从后台数据库中获取数据
先并闹用ajax jquery 访问 一般处理程序.然后一般处理程序 用三层架构 获取数据库数带蔽棚据,比如是数据集(或表格) 然后在逻辑处理层 转换为json 格式的。
然后 返回到一般处理程序 ,将转换后的json数据 respon.write,蠢则然后 在ajax 的success 获取date 然后 json循环到 highcharts 里的字段
⑤ highcharts 怎么使用 oracle 数据库的值,来生成动态图表
你试试finereport,它是可以做动态图的,而且还可以再图表上做超链接什么的,点一下图片的一个位置,可以调到更细的图表
⑥ HIghcharts实现从Mysql实时读取数据库(Java的)
我想请问下你是不会java的代码还是不会highcharts的代码哦?highcharts不是提供了很多例子吗?你只需要用java将从数据库查询到的数据高明转换成json格式传到前台就可以展示效果了啊。
这个要依赖本地的实际环境,谁有那么多时间给你写啊,而且不是一两句代码的事情。你可以自己尝试去写,不会的地方可以问我。
希望早者可以帮助戚睁告到你,望采纳,谢谢,有问题可以继续追问我
⑦ highcharts X轴怎样获取数据库中的时间数据
先把数据库中的数据保键滑存大宴在一个数组中array1
再滚亮银循环赋值给
options.xAxis.categories[i] = array1[i];