教你做一个简单的highchart.js图表

1.js里的写法:

$(function () {
draw();//打开页面时呈现

})
function draw() {

var arrLoginName = [], arrLiveness = [];//highchart能读出的都是数组,因此,你的定义的参数都应是数组
var form = $("form").serialize();
$.ajax({
url: "/FFManager/Statistics/GetCustomerIncome/",
type: "POST",
async: false,//同步刷新ajax,这个很重要,否则加载不上数据
cache: false,
dataType: "json",
data: form,
success: function (data, textStatus, xmlHttpRequest) {

var result = data,//从c#后端获取的数据
rows = result.rows;

if (!!rows) {
for (var i = 0, length = rows.length; i < length; i++) {
arrLoginName.push(rows[i].LoginName);
arrLiveness.push(rows[i].Price);
}
}
},
error: function (xmlHttpRequest, textStatus, errorThrown) {

}
});

$(‘#canvasParent‘).highcharts({
chart: {
type: ‘column‘
},
title: {
text: ‘客户分答收入‘,
style: {
color: ‘#6495ED‘,
fontWeight: ‘bold‘,
fontSize: ‘20px‘
}
},
xAxis: {
categories: arrLoginName,//后台传过来的x轴的数据
title: {
text: ‘客户‘
}
},
yAxis: {
min: 0,
title: {
text: ‘金额(元)‘,
align: ‘high‘
},
labels: {
overflow: ‘justify‘
}
},
tooltip: {
valueSuffix: null
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: ‘vertical‘,
align: ‘right‘,
verticalAlign: ‘top‘,
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || ‘#FFFFFF‘),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: ‘客户分答收入‘,
data: arrLiveness //后端传过来的y轴的数据  就这两个数据很重要,其他可以粘贴复制
}]
});
}

后端数据(c#):

public JsonResult GetCustomerIncome(FormCollection form)
{
String strStartTime = form["StartTime"] ?? "";
String strEndTime = form["EndTime"] ?? "";
int count = Convert.ToInt32(form["SelectCount"] ?? "0");
// 时间间隔
String strInterval = form["Interval"] ?? "";
// 时间指定
String strAssign = form["Assign"] ?? "";

IList<Model.RunUI.CustomerIncome> lectureIncomeList = bllStatistics.GetCustomerIncome(strStartTime, strEndTime, strInterval, strAssign, CurrentUser.EmployeeID);

if (lectureIncomeList == null) return Json(new object[] { }, JsonRequestBehavior.AllowGet);
var data = lectureIncomeList.Select(m => new
{
m.CustomerID,
m.LoginName,
m.NickName,
m.TrueName,
m.Price, // 收入金额
m.dateTime, // 时间
}).Take(count);
return Json(new { rows = data }, JsonRequestBehavior.AllowGet);
}

* 后端里面有price,和loginname两个字段,这两个字段分别作为y和x轴,在js里转为数组,挨个对应显示*

时间: 2024-08-02 01:27:35

教你做一个简单的highchart.js图表的相关文章

[3] 用D3.js做一个简单的图表吧!

本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为可缩放矢量图形(Scalable Vector Graphics),SVG 使用 XML 格式定义图像,不清楚什么是SVG的朋友请先在 w3cschools 学习下

【 D3.js 入门系列 — 3 】 做一个简单的图表!

图1. 柱形图 1. 柱形图 前几章的例子,都是对文字进行处理.本章中将用 D3 做一个简单的柱形图.制作柱形图有很多种方法,比如用 HTML 的 <div> 标签,或在 SVG 上绘制 . SVG ,即可缩放矢量图形(Scalable Vector Graphics),使用 XML 格式定义图形,可在 W3School 学习 SVG 的相关语法,不需要记住所有标签,用的时候再查即可. 先看下面的代码: <script src="http://d3js.org/d3.v3.mi

使用React并做一个简单的to-do-list

1. 前言 说到React,我从一年之前就开始试着了解并且看了相关的入门教程,而且还买过一本<React:引领未来的用户界面开发框架 >拜读.React的轻量组件化的思想及其visual-dom的这种技术创新,也算是早就有了初步了解.一来没有学的太深入,二来后来在工作中和业余项目中都没有用到,因此慢慢的就更加生疏了. 近期,因为我想把自己的开源项目wangEditor能放在React.angular和vuejs中使用.先从react开始,顺手自己也重试一下React的基础知识,顺便再做一个小d

如何做一个简单的Chrome Extension用于网页截屏

Chrome extension是一个文件包,里面包含了一个配置文件manifest.json,以及一些用于Web开发的文件和资源 (HTML, JavaScript, CSS,等). Chrome Extension开发指南 Chrome Extension Overview Chrome Extension Debugging Chrome Extension Samples 如何实现网页截屏功能 看一下manifest文件: {       "name": "Scree

web前端课程技术内容之如何做一个简单的手机端页面的翻页

[如何做一个简单的手机端页面的翻页] 第一步:创建移动端页面内 HTML + CSS [注]可用弹性布局 但需要注意的是 外层盒子的定位 第二步: 思考问题 要实现怎样的效果? 1. 手指滑动时触发事件[左右]两个方向 2.点击footer部分的下标实现切换效果 3.点击footer部分的下标实现下标颜色变化 第三步:编写JS代码 添加监听事件 document.addEventListener('DOMContentLoaded',function(){ 创建一个数组用于调用数组属性值 或者

.Net Core 3.0后台使用httpclient请求网络网页和图片_使用Core3.0做一个简单的代理服务器

原文:.Net Core 3.0后台使用httpclient请求网络网页和图片_使用Core3.0做一个简单的代理服务器 目标:使用.net core最新的3.0版本,借助httpclient和本机的host域名代理,实现网络请求转发和内容获取,最终显示到目标客户端! 背景:本人在core领域是个新手,对core的使用不多,因此在实现的过程中遇到了很多坑,在这边博客中,逐一介绍下.下面进入正文 正文: 1-启用httpClient注入: 参考文档:https://docs.microsoft.c

Vue小白踩坑 使用vue做一个简单的todo list

前言 寒假待在家,无所事事,便开始做起了毕设,由于要写跨端应用,基础是vue,所以先攻克vue 做一个简单的todo 当然是自己做的,效率有点儿低,不过能做出来已经很不错了把 hhh 源码 本质上毕设的前端展示,也就是对一个todo-list加一个好看的ui,数据排版等等花里胡哨的东西,本质的东西还是数据的crud <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title

使用Multiplayer Networking做一个简单的多人游戏例子-2/3(Unity3D开发之二十六)

猴子原创,欢迎转载.转载请注明: 转载自Cocos2Der-CSDN,谢谢! 原文地址: http://blog.csdn.net/cocos2der/article/details/51007512 使用Multiplayer Networking做一个简单的多人游戏例子-1/3 使用Multiplayer Networking做一个简单的多人游戏例子-2/3 使用Multiplayer Networking做一个简单的多人游戏例子-3/3 7. 在网络中控制Player移动 上一篇中,玩家操

用EF DataBase First做一个简单的MVC3报名页面

使用EF DataBase First做一个简单的MVC3报名网站 ORM(Object Relational Mapping)是面向对象语言中的一种数据访问技术,在ASP.NET中,可以通过ADO.NET Entity Framework技术来简化数据访问.在EF里,有Code First,Model First和DataBase First三种方法来实现. 百度百科关于ORM的介绍: http://baike.baidu.com/view/197951.htm?fr=aladdin 1.就像