//月产量统计图
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的使用:从数据库获取数据显示在图上的更多相关文章

  1. WinForm中从SQLite数据库获取数据显示到DataGridView

    1.关于Sqlite Sqlite是一款开源的.适合在客户端和嵌入式设备中使用的轻量级数据库,支持标准的SQL. 不像SqlServer或Oracle的引擎是一个独立的进程.通过TCP或命名管道等与程 ...

  2. Jquery通过AJAX从后台获取数据显示在表格上(复选)

    代码: function GetMultiLineSelectTable(tableId, selectIds) { var table = $(tableId); var url = table.d ...

  3. Python使用Flask框架,结合Highchart处理csv数据(引申-从文件获取数据--从数据库获取数据)

    参考链接:https://www.highcharts.com.cn/docs/process-text-data-file 1.javascript代码 var options = { chart: ...

  4. MySQL数据库获取多个汉字拼音的首字母函数

    需求简介:最近的一个项目,想实现如下图所示的显示效果.很明显,如果能够获取对应的汉字词组中每个汉字的拼音首字母就可以实现了,如果是固定的几组汉字,人为的拼一下就可以 了,不过项目中有多处功能需要这个效 ...

  5. 如何用asp.net MVC框架、highChart库从sql server数据库获取数据动态生成柱状图

    如何用asp.net MVC框架.highChart库从sql server数据库获取数据动态生成柱状图?效果大概是这样的,如图: 请问大侠这个这么实现呢?

  6. Bootstrap 分页插件 ajax获取数据显示

    Bootstrap 分页插件 ajax获取数据显示 标签(空格分隔): bootstrap 文章的内容是使用bootstrap-paginator进行分页,使用ajax获取后台数据.渲染. 1. 版本 ...

  7. easyui-datagrid通过action从数据库获取数据的关键代码

    实际上是结合struts2来从数据获取json格式的数据.   关键代码: GetUserAction.java代码   package com.log.control; import java.io ...

  8. PHP通过ZABBIX API获取主机信息 VS 直接从数据库获取主机信息

    最近项目需要获取linux主机的一些信息,如CPU使用率,内存使用情况等.由于我们本身就装了zabbix系统,所以我只用知道如何获取信息即可,总结有两种方法可以获取. 一.通过ZABBIX API获取 ...

  9. mysql数据库连接池使用(三)数据库元数据信息反射数据库获取数据库信息

    1.1. mysql数据库连接池使用(三)数据库元数据信息反射数据库获取数据库信息 有时候我们想要获取到数据库的基本信息,当前程序连接的那个数据库,数据库的版本信息,数据库中有哪些表,表中都有什么字段 ...

随机推荐

  1. 解决Highcharts指针偏离的问题

    Highcharts 在初始化3D柱状图 时 (注意:3D图形会发生偏移,2D显示正常) 如果加入 shared: true,属性,则可能会导致柱 状图 toolTip提示框偏移,解决方法是去掉或注释 ...

  2. 服务器未能识别http头soapaction的值

    公司真是坑的一比 ,连接PDA报出这个错误 网上找的解决方案: 加什么wsdl http://www.cnblogs.com/dengxinglin/archive/2012/05/02/247868 ...

  3. javascript在html直接传值

    function getUrlParam(url, name) { var pattern = new RegExp("[?&]" + name + "\=([^ ...

  4. Java高级——交通灯管理系统

    本方法模拟了现实生活中的交通信号灯的情况 1.先构建Road类,此类可以创建12个方向的路 代码如下: package com.springtie.traffic; import java.util. ...

  5. PHP 导出excel 数据量大时

    public function ceshiexcel1(){ set_time_limit(0); $filename = '病毒日志'; header('Content-Type: applicat ...

  6. HDU 1257 最少拦截系统【最长上升子序列】

    解题思路:可以转化为求最长上升子序列来做,还是可以用an与按升序排列后的an求LCS来做,为防止超时,用滚动数组优化一下就可以了. 最少拦截系统 Time Limit: 2000/1000 MS (J ...

  7. java的-D命令行参数 mvn -D参数

    java的-D命令行参数 我们会用mvn启动一个应用,如下的命令行: MAVEN_OPTS="-XX:PermSize=256m -XX:MaxPermSize=512m" mvn ...

  8. php语法学习:轻松看懂PHP语言

    基础语法 开头结尾 PHP脚本以 "<?php " 开头以 "?>" 结尾 <!DOCTYPE html> <html>&l ...

  9. JavaScript:理解执行环境、作用域链和活动对象

    作用域的原理,对JS将如何解析标识符做出了解答.而作用域的形成与执行环境和活动对象紧密相关. 我们对于JS标识符解析的判断,存在一个常见误区 首先,看一个关于JS标识符解析的问题 ,源于风雪之隅提出的 ...

  10. 为什么Arduino独占鳌头并站稳脚跟?

    出处: http://bbs.dfrobot.com.cn/thread-793-1-1.html 为什么Arduino独占鳌头并站稳脚跟? 每个月,我都会在<Make>杂志上发表几篇社论 ...