㈠ highcharts繪圖，怎麼從後台資料庫中獲取數據
先用ajax jquery 訪問 一般處理程序.然後一般處理程序 用三層架構 獲取資料庫數據，比如是數據集(或表格) 然後在邏輯處理層 轉換為json 格式的。
然後 返回到一般處理程序 ，將轉換後的json數據 respon.write，然後 在ajax 的success 獲取date 然後 json循環到 highcharts 里的欄位
㈡ highcharts 怎麼使用 oracle 資料庫的值，來生成動態圖表
你試試finereport，它是可以做動態圖的，而且還可以再圖表上做超鏈接什麼的，點一下圖片的一個位置，可以調到更細的圖表
㈢ 如何將資料庫的數據放到highcharts動態顯示
引用來自「李照全」的答案 highcharts API你沒問題吧，即用假數據可以生產圖表不?如果沒問題，用Ajax請求後台資料庫，然後把數據替上就行了。
㈣ 用highcharts載入圖像之後動態改變圖像
js代碼：
$(function() { $(document).ready(function() { Highcharts.setOptions({ global: { useUTC: false } }); var chart; chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'spline', animation: Highcharts.svg, // don't animate in old IE marginRight: 10, events: { load: function() {} } }, title: { text: 'Live random data' }, xAxis: { type: 'datetime', tickPixelInterval: 150 }, yAxis: [{ title: { text: 'Value' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, { title: { text: 'Name' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }], tooltip: { formatter: function() { return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 2); } }, legend: { enabled: false }, exporting: { enabled: false }, series: [{ name: 'Random data', data: (function() { // generate an array of random data var data = [], time = (new Date()).getTime(), i; for (i = -19; i <= 0; i++) { data.push({ x: time + i * 1000, y: Math.random() }); } return data; })() }, { name: 'Random data', data: (function() { // generate an array of random data var data = [], time = (new Date()).getTime(), i; for (i = -19; i <= 0; i++) { data.push({ x: time + i * 1000, y: Math.random() }); } return data; })() }] }); // set up the updating of the chart each second var series = chart.series[0]; var series1 = chart.series[1]; setInterval(function() { var x = (new Date()).getTime(), // current time y = Math.random(); series.addPoint([x, y + 1], true, true); series1.addPoint([x, y - 1], true, true); }, 1000); }); });
html代碼：
<head> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/highcharts.js"></script> <script type="text/javascript" src="js/exporting.js"></script> <script> //左側Javascript代碼 </script> </head> <body> <div id="container" style="min-width:700px;height:400px"></div> </body>
以上這篇Highcharts 多個Y軸動態刷新數據的實現代碼 就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
㈤ web程序，架構是springmvc（controller等），前台是jquery，如何利用highcharts動態從資料庫中查找數據。
前台接到的,用@ResponseBody可以轉換為java對象,不需要在parseJSON
如ret,可以直接ret.propName獲取屬性值
以下一個簡單例子,沒有實現
java:
@Controller
@RequestMapping("/beanName")
publicclassNameController{
@ResponseBody
@RequestMapping("/beanMethod")
//params的類型只是舉個栗子
publicReturnBeanmethodName(@RequestBodyMap<String,Object>params){
//...loaddata
//...covertdata2ReturnBean,mayreturnList<ReturnBean>orelse
returnreturnBean;//(instance)
}
}
jquery:
[]及其中內容替換
$.ajax({
url:[ApplicationContext+/beanName/methodName],//eg:/webapp/beanName/meghotName
type:"POST",
contentType:'application/json',
//data為傳入後端參數,為json數據,mvc自己轉換成@RequestBody後指定的類型
//parseeg:
//if($.isPlainObject(data)||typeofdata!="string"){
//data=$.toJSON(data);
//}
data:[mayaobject,mvcautoconvert],
success:function(retBean){
//makehighchartserias
//ifhighchartinit$('#chartDomId').highcharts().series[0].setData([highchartserias])
//
//highchart的serias可以有很多種構造,可以是
//series:[{
// type:'column',
// name:'seriesName',
// data:[['column1',1],['column2',2]]
//}]
//也可以是
//series:[{
// type:'column',
// name:'seriesName',
// data:[{id:1,y:1},{id:2,y:2}]
//}]
//根據需要自行拼接
},
error:function(XMLHttpRequest,textStatus,errorThrown){
//doonerror
},
});
㈥ highcharts如何實現動態刷新
highcharts如何實現動態刷新
實現的是折線圖。目前已經實現了從資料庫中載入數據，但是定時刷新數據不知道怎麼實現。
使用chart.series[0].setData(data);每次刷新後表數據就沒有了，不知道是不是data的格式寫錯了，
想問下參數data的數據格式的例子。
function getForm(){
//使用JQuery從後台獲取JSON格式的數據
$.ajax({
type: "POST",
url: "chart.ashx",
success: function(data){
chart.series[0].setData(data);
},
error:function(msg)
{
alert("通信錯誤!");
}
});
$(document).ready(function() {
//每隔1秒自動調用方法，實現圖表的實時更新
window.setInterval(getForm,10000);
});
㈦ highcharts中的data如何循環添加多條數據
使用一個全局變數遍歷數據獲取到存起來比如我用的叫line_list 然後放到容器裡面就好
series:line_list 然後就Ok了
㈧ Highcharts如何動態載入雙y軸的數據謝謝！
這個例子有點復雜，給你說個思路，其實Y軸一個的時候，它也是一個數組[0]當兩個Y那麼你在裡面在加同樣Y[1]主要是裡面你需要加一個分組的屬性stack。然後下面series[{
這裡面也需要放一個分組的屬性stack:'1'值隨便定。和上面y的分組名稱對應就行。希望能幫到你}]
㈨ Highcharts動態顯示多條實時曲線，怎麼初始化數據
$(function () {
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
var series1 = this.series[1];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random();
y2 = Math.random();
series.addPoint([x, y], true, true);
series1.addPoint([x, y2], true, true);
}, 1000);
}
}
},
title: {
text: 'demo（樣例）'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
})()
}, {
name: 'Random data1',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
})()
}]
});
});
});
㈩ 如何讓highcharts折線圖讀取資料庫json格式數據並在圖表上顯示
Highcharts與Ajax結合實現實時刷新圖表——PHP版
參考網址：網頁鏈接
參考官網：網頁鏈接
一、環境及sql
開發語言：php+Jquery
資料庫：mysql
數據表結構：