highcharts的使用:从数据库获取数据显示在图上
//月产量统计图
function GetHighCharts() {
var date = new Date();
var year = date.getFullYear();
var month_1 = date.getMonth();
date.setMonth(month_1 + 1);
var month = date.getMonth();
date.setDate(0);
var day = date.getDate();
var daystr = "[";//daystr为横坐标的数据:[1,2,3, ....31/30]
for (var i = 1; i <= day ; i++) {
if (i != day) {
daystr += i + ",";
} else {
daystr += i + "]";
}
}
$.ajax({
url: "/POM/Order/GetFinishAmountByMonth?year=" + year + "&month=" + month + "&day=" + day,
dataType: "text",
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
async: false,
success: function (data) {
var vardata = eval('(' + data + ')');//从后台获取的每日的产量,通过eval('(' + data + ')')处理才可以显示在图上
$('#container').highcharts({
chart: {
type: 'spline'//曲线图
},
title: {
text: null,
// x: -20 //center
},
subtitle: {
text: null,
//x: -20
},
xAxis: {
categories: eval('(' + daystr + ')')//横坐标的数据也要做这样的处理
},
yAxis: {
title: {
text: '产量(台)'
},
min:0,
allowDecimals:false,
labels: {
formatter: function () {
return this.value
}
}
},
tooltip: {
crosshairs: true,
shared: true
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
}
},
series: [{
name: '发动机',
marker: {
symbol: 'square'
},
data: vardata
}]
});
}
});
}
总结:无论是横坐标还是纵坐标的数据都是:[112,929,192,,,,,,] 这种格式的,再通过eval()处理就可以了
highcharts的使用:从数据库获取数据显示在图上的更多相关文章
- WinForm中从SQLite数据库获取数据显示到DataGridView
1.关于Sqlite Sqlite是一款开源的.适合在客户端和嵌入式设备中使用的轻量级数据库,支持标准的SQL. 不像SqlServer或Oracle的引擎是一个独立的进程.通过TCP或命名管道等与程 ...
- Jquery通过AJAX从后台获取数据显示在表格上(复选)
代码: function GetMultiLineSelectTable(tableId, selectIds) { var table = $(tableId); var url = table.d ...
- Python使用Flask框架,结合Highchart处理csv数据(引申-从文件获取数据--从数据库获取数据)
参考链接:https://www.highcharts.com.cn/docs/process-text-data-file 1.javascript代码 var options = { chart: ...
- MySQL数据库获取多个汉字拼音的首字母函数
需求简介:最近的一个项目,想实现如下图所示的显示效果.很明显,如果能够获取对应的汉字词组中每个汉字的拼音首字母就可以实现了,如果是固定的几组汉字,人为的拼一下就可以 了,不过项目中有多处功能需要这个效 ...
- 如何用asp.net MVC框架、highChart库从sql server数据库获取数据动态生成柱状图
如何用asp.net MVC框架.highChart库从sql server数据库获取数据动态生成柱状图?效果大概是这样的,如图: 请问大侠这个这么实现呢?
- Bootstrap 分页插件 ajax获取数据显示
Bootstrap 分页插件 ajax获取数据显示 标签(空格分隔): bootstrap 文章的内容是使用bootstrap-paginator进行分页,使用ajax获取后台数据.渲染. 1. 版本 ...
- easyui-datagrid通过action从数据库获取数据的关键代码
实际上是结合struts2来从数据获取json格式的数据. 关键代码: GetUserAction.java代码 package com.log.control; import java.io ...
- PHP通过ZABBIX API获取主机信息 VS 直接从数据库获取主机信息
最近项目需要获取linux主机的一些信息,如CPU使用率,内存使用情况等.由于我们本身就装了zabbix系统,所以我只用知道如何获取信息即可,总结有两种方法可以获取. 一.通过ZABBIX API获取 ...
- mysql数据库连接池使用(三)数据库元数据信息反射数据库获取数据库信息
1.1. mysql数据库连接池使用(三)数据库元数据信息反射数据库获取数据库信息 有时候我们想要获取到数据库的基本信息,当前程序连接的那个数据库,数据库的版本信息,数据库中有哪些表,表中都有什么字段 ...
随机推荐
- ML学习笔记- 神经网络
神经网络 有的模型可以有多种算法.而有的算法可能可用于多种模型.在神经网络中,对外部环境提供的模式样本进行学习训练,并能存储这种模式,则称为感知器;对外部环境有适应能力,能自动提取外部环境变化特征,则 ...
- 依赖注入Unity框架
依赖注入和控制反转是对同一件事情的不同描述,从某个方面讲,就是它们描述的角度不同.依赖注入是从应用程序的角度在描述,可以把依赖注入描述完整点:应用程序依赖容器创建并注入它所需要的外部资源:而控制反转是 ...
- DB2报“数据库日志已满”问题解决
用控制中心直接改会比较容易一点,在数据库名称上点右键-->配置-->日志-->日志文件大小.主日志文件数.辅助日志文件数改大一点. 也可用命令行db2cmd db2 update d ...
- solarwinds之监控路由器
配置路由器开启SNMP功能 1. 开启路由器的SNMP功能,并指定两个共同体名 网络扫描 1. 添加一个新扫描 2. 默认下一步 ...
- mac上卸载node
//卸载方法一 有时手贱看到新版本就升级,升级后发现一堆模块不能用了,心情好慢慢调,但也有调不好的时候,只能卸载重装低版本的node了. 我的机器环境如下 1. Mac OSX 10.10.3 2. ...
- GCC中的强符号和弱符号及强引用和弱引用
1. 强符号和弱符号 1.1 u-boot和kernel中的__weak指令 u-boot和kernel比较普遍地使用了__weak来定义函数. 在include\linux\compiler-gcc ...
- CorelDRAW X8制作金属质感3D立体按钮
本教程教您使用CorelDRAW X8制作金属质感3D立体按钮.绘图中主要应用渐变填充技巧为立体按钮表现物体质感和丰富的色彩变化,最后实现的效果也是不错的,是很实用的案例,教程难度一般,完成图如下: ...
- Django框架 part 2
web 框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web框架了. 半成品自定义web框架 impo ...
- 发个ZKW线段树板子测试一下代码高亮
是我,Long time no see --Jim 先安利 Wolves 歌手:Madilyn Bailey http://music.163.com/song/524149464 ...
- 《你又怎么了我错了行了吧》【Beta】Scrum meeting 1
第一天 日期:2019/6/24 前言: 第1次会议在女生宿舍召开 对前面的开发成果进行验收和测试,继续完善项目 1.1 今日完成任务情况以及明日任务安排 姓名 当前阶段任务 下一阶段任务 刘 佳 对 ...