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];