highcharts绘图，怎么从后台数据库中获取数据？

halfblood_prince 2014-07-21 11:46:21
下面这个示例已经可以运行了，但我不知道怎么样将这个示例数据替换成从后台数据库中获取。请各位能否给一个类似这样向后台请求数据库的例子？

开发语言：java
IDE：MyEclipse
数据库：sql server




<html>  

<head>  

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  

<title>MyStock</title>  



</head>  

  <body>

   <div id="container" style="height: 600px; min-width: 100px"></div>

  </body>

  <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>

  <script type="text/javascript" src="js/highstock.js"></script>





  <script type="text/javascript">

  var usdeur = [

[Date.UTC(2011,1,1),0.7232],

[Date.UTC(2011,1,2),0.7239],

[Date.UTC(2011,1,3),0.7341],

[Date.UTC(2011,1,4),0.7364],

[Date.UTC(2011,1,7),0.7357],

[Date.UTC(2011,1,8),0.734],

[Date.UTC(2011,1,9),0.7289],

[Date.UTC(2011,1,10),0.7351],

[Date.UTC(2011,1,11),0.7377],

[Date.UTC(2011,1,14),0.7419],

[Date.UTC(2011,1,15),0.7409],

[Date.UTC(2011,1,16),0.7367],

[Date.UTC(2011,1,17),0.7341],

[Date.UTC(2011,1,18),0.7304],

[Date.UTC(2011,1,21),0.731],

[Date.UTC(2011,1,22),0.7315],

[Date.UTC(2011,1,23),0.7268],

[Date.UTC(2011,1,24),0.7236],

[Date.UTC(2011,1,25),0.7271],

[Date.UTC(2011,1,28),0.7235],

[Date.UTC(2011,2,1),0.7263],

[Date.UTC(2011,2,2),0.7213],

[Date.UTC(2011,2,3),0.7165],

[Date.UTC(2011,2,4),0.715],

[Date.UTC(2011,2,7),0.7162],

[Date.UTC(2011,2,8),0.7198],

[Date.UTC(2011,2,9),0.7192],

[Date.UTC(2011,2,10),0.7246],

[Date.UTC(2011,2,11),0.7194],

[Date.UTC(2011,2,14),0.7148],

[Date.UTC(2011,2,15),0.715],

[Date.UTC(2011,2,16),0.7203],

[Date.UTC(2011,2,17),0.7128],

[Date.UTC(2011,2,18),0.7052],

[Date.UTC(2011,2,21),0.7036],

[Date.UTC(2011,2,22),0.7058],

[Date.UTC(2011,2,23),0.7091],

[Date.UTC(2011,2,24),0.7058],

[Date.UTC(2011,2,25),0.71],

[Date.UTC(2011,2,28),0.7107],

[Date.UTC(2011,2,29),0.7082],

[Date.UTC(2011,2,30),0.7079],

[Date.UTC(2011,2,31),0.7064],

[Date.UTC(2011,3,1),0.7026],

[Date.UTC(2011,3,4),0.704],

[Date.UTC(2011,3,5),0.7026],

[Date.UTC(2011,3,6),0.6982],

[Date.UTC(2011,3,7),0.6996],

[Date.UTC(2011,3,8),0.6907],

[Date.UTC(2011,3,11),0.6934],

[Date.UTC(2011,3,12),0.6906],

[Date.UTC(2011,3,13),0.692],

[Date.UTC(2011,3,14),0.6896],

[Date.UTC(2011,3,15),0.6931],

[Date.UTC(2011,3,18),0.7024],

[Date.UTC(2011,3,19),0.6961],

[Date.UTC(2011,3,20),0.6888],

[Date.UTC(2011,3,21),0.6869],

[Date.UTC(2011,3,22),0.6869],

[Date.UTC(2011,3,25),0.6874],

[Date.UTC(2011,3,26),0.6801],

[Date.UTC(2011,3,27),0.6763],

[Date.UTC(2011,3,28),0.6738],

[Date.UTC(2011,3,29),0.6753],

[Date.UTC(2011,4,2),0.6759],

[Date.UTC(2011,4,3),0.674],

[Date.UTC(2011,4,4),0.6744],

[Date.UTC(2011,4,5),0.687],

[Date.UTC(2011,4,6),0.6983],

[Date.UTC(2011,4,8),0.696],

[Date.UTC(2011,4,10),0.6945]

];

$(function() {

	var chart = new Highcharts.StockChart({

	    chart: {

	        renderTo: 'container'//指向的div的id属性

	    },

	    exporting: {  

            enabled: false //是否能导出趋势图图片

        }, 

		title : {

				text : 'AAPL Stock Price(苹果股价)'//图表标题

			},

	    xAxis: {

	    	tickPixelInterval: 200,//x轴上的间隔

		//	title :{

		//		text:"title"

		//	},

			type: 'datetime', //定义x轴上日期的显示格式

			labels: {

			formatter: function() {

				var vDate=new Date(this.value);

				//alert(this.value);

				return vDate.getFullYear()+"-"+(vDate.getMonth()+1)+"-"+vDate.getDate();

			},

			align: 'center'

		}

	    },

	    yAxis : {  

                  

              title: {  

                  text: 'Rate(汇率)'  //y轴上的标题

              }  

         },  

		tooltip: {

            xDateFormat: '%Y-%m-%d, %A'//鼠标移动到趋势线上时显示的日期格式

        },

	    rangeSelector: {

			buttons: [{//定义一组buttons,下标从0开始

			type: 'week',

			count: 1,

			text: '1w'

		},{

			type: 'month',

			count: 1,

			text: '1m'

		}, {

			type: 'month',

			count: 3,

			text: '3m'

		}, {

			type: 'month',

			count: 6,

			text: '6m'

		}, {

			type: 'ytd',

			text: 'YTD'

		}, {

			type: 'year',

			count: 1,

			text: '1y'

		}, {

			type: 'all',

			text: 'All'

		}],

			selected: 1//表示以上定义button的index,从0开始

	    },

	    

	    series: [{

	        name: 'USD to EUR(美元对欧元)',//鼠标移到趋势线上时显示的属性名

	        data: usdeur//属性值

			//marker : {

			//		enabled : true,

			//		radius : 3

			//	},

			//shadow : true

	    }]

	});

});

  </script>

</html>
...全文
8063 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
qq_36270842 2016-10-26
  • 打赏
  • 举报
 回复
楼主，你的问题解决了吗，我现在也在做这个，需要这样的demo，可以提供一下么
showhunter74 2014-07-22
  • 打赏
  • 举报
 回复
引用 7 楼 halfblood_prince 的回复:
[quote=引用 6 楼 cbxjj 的回复:] 官网上下demo自己看看呗 这么简单的事情
网上没有人不说这个问题简单，但就是找不到一个像样的向后台数据库请求数据的DEMO。要不，你奉献一个链接吧？[/quote] http://www.highcharts.com/stock/demo 直接view options就可以看到怎么引用了
showhunter74 2014-07-22
  • 打赏
  • 举报
 回复
引用 5 楼 halfblood_prince 的回复:
[quote=引用 3 楼 showhunter74 的回复:]
后台写个action
页面加载的时候，把条件传入action。然后把返回的数据用json字符串的格式返回。然后赋值个highchairs中的data就可以了


JSON是键 值格式，但如果我的这个线图中的线条有两条，就是说我用于作图的数据有三个字段：时间、数据1、数据2。这样的数据形式也能用JSON吗？[/quote]
这个只要在jsp上封装一个 data数组，然后替换highchairs里的data就可以了
如
var data1 = [];
<#list userLoginFail as it>
data1[${it_index!''}]={
name : '${it.name!''}',
y : ${it.value!''}
};
</#list>

series: [{
type: 'pie',
name: '数据集1',
data: data1
}]
halfblood_prince 2014-07-22
  • 打赏
  • 举报
 回复
引用 6 楼 cbxjj 的回复:
官网上下demo自己看看呗 这么简单的事情
网上没有人不说这个问题简单，但就是找不到一个像样的向后台数据库请求数据的DEMO。要不，你奉献一个链接吧？
剑神一笑 2014-07-21
  • 打赏
  • 举报
 回复
官网上下demo自己看看呗 这么简单的事情
halfblood_prince 2014-07-21
  • 打赏
  • 举报
 回复
引用 3 楼 showhunter74 的回复:
后台写个action 页面加载的时候，把条件传入action。然后把返回的数据用json字符串的格式返回。然后赋值个highchairs中的data就可以了
JSON是键 值格式，但如果我的这个线图中的线条有两条，就是说我用于作图的数据有三个字段：时间、数据1、数据2。这样的数据形式也能用JSON吗？
halfblood_prince 2014-07-21
  • 打赏
  • 举报
 回复
各位，给个实例怎么样？自信JAVA Web自己要摸索很久
showhunter74 2014-07-21
  • 打赏
  • 举报
 回复
后台写个action 页面加载的时候，把条件传入action。然后把返回的数据用json字符串的格式返回。然后赋值个highchairs中的data就可以了
咖啡加糖_ 2014-07-21
  • 打赏
  • 举报
 回复
在后台查询数据库吧数据查出来后组转成js中数据格式，你这种图标就是一个js数组，一步步走
花谢尊前不敢香 2014-07-21
  • 打赏
  • 举报
 回复
写一个接口，是调用数据库里对应数据的，前台ajax调用，然后把返回的值赋给usdeur就行了。
bjtu_INSIS_T_017:时间序列查询展示Web页面前端设计与开发培训
bjtu_INSIS_T_017 时间序列查询展示Web页面前端设计与开发培训 查询功能，允许用户输入查询条件对不同数据文件中的时间序列数据进行查询，用户可以选择从1th_ts_train数据集还是5th_ts_train数据集进行查询。选定数据源后，输入查询时间范围 将相应时间段内的时间序列数据查询出来； 系统后台使用flask框架实现，运行根据前端请求提供的查询条件，对数据库进行查询，并返回对应时间序列的数据。 比如：查询条件为：数据集：1th_ts_train.csv，开始时间戳：xxx, 结束时间戳：xxx，则返回对应时间序列的对应时间区间内的timestamp，value和label，从而提供给前端进行绘图展示。 将4）中查询结果的value数值以折线图的方式展现，label为异常点的对应点请使用相关技术突出强调显示，图表要求使用Highcharts插件（Highstock）
highcharts和dwr实现从数据库拿数据绘图
最近接触了一下highcharts和dwr，所以记一下
java layui 实现从后台获取数据并画图chart
1.画图控件 <div class="layui-form-item" style="width: 100%; height: 100%; margin: 0"> <div class="layui-inline" style="width: 100%; height: 650px; margin: 0"> <div id="container" style="width: 100%; height: 100%; margin: 0 auto"><
Vue 中使用vue2-highcharts实现实时曲线数据展示示例
1、上一篇文章Vue 中使用vue2-highcharts实现曲线数据展示示例主要是使用vue2-highcharts实现历史曲线，将一连串(多个数据点)以曲线的方式显示出来。实时曲线，每隔一分钟，增加一个点，实时的将多个点连接起来绘制成曲线，并且最多显示10个点，如果已经有10个点，最后一个点加进来之前，将最前面的一个点移除掉。 2、vue前端代码如下： template> d
使用HIGHCHARTS绘制服务端返回数据曲线图
HIGHCHARTS 是什么？ Highcharts是一个使用纯JavaScript编写的绘图工具，它提供了简单的方式为你的网页或者Web应用添加交互式图表。 Highcharts目前支持的交互式图表类型如下：line -> 直线图 spline -> 曲线图 area -> 面积图 areaspline -> 曲线面积图 arearange -> 面积范围图 areasplinerange -
Web 开发

81,091

社区成员

341,719

社区内容

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章