按highcharts中column形式转对象展现格式
highcharts图表type:column事例的格式是这样的:
(不论接口返回什么格式,需要转换成下面这样的):
xAxis: {
categories: ['一月','二月'],
},
series: [
{name: '东京',data: [49, 71]},
{name: '纽约',data: [39, 71]},
{name: '伦敦',data: [65, 59]},
{name: '柏林',data: [60, 47]}
]
我们最终要得到 xAxis和series
column:[
{notValidCount: 1, time: "2020-03-30", validCount: 0},
{notValidCount: 4, time: "2020-03-31", validCount: 0},
{notValidCount: 7, time: "2020-04-01", validCount: 0},
{notValidCount: 6, time: "2020-04-02", validCount: 0},
{notValidCount: 0, time: "2020-04-03", validCount: 0},
{notValidCount: 6, time: "2020-04-04", validCount: 0},
{notValidCount: 5, time: "2020-04-05", validCount: 0},
]
我们要转换成这样的格式,以上面的列转成自己的行,xAxis是time:
{
notValidCount: [1, 4, 7, 6, 0, 6, 5],
time:["2020-03-30", "2020-03-31", "2020-04-01", "2020-04-02", "2020-04-03","2020-04-04","2020-04-05"],
validCount:[0, 0, 0, 0, 0, 0, 0]
}
------------------------------------------------------------------
代码实现:
var column =[
{notValidCount: 1, time: "2020-03-30", validCount: 1},
{notValidCount: 4, time: "2020-03-31", validCount: 1},
{notValidCount: 7, time: "2020-04-01", validCount: 2},
{notValidCount: 6, time: "2020-04-02", validCount: 2},
{notValidCount: 2, time: "2020-04-03", validCount: 2},
{notValidCount: 6, time: "2020-04-04", validCount: 2},
{notValidCount: 5, time: "2020-04-05", validCount: 3},
];
var xAxis = [];
var dataNew = {};
var series = [];
for(var el in column[0]){
dataNew[el] = [];
//el 每个分类字段名
column.forEach(function(item,index){
//循环7次notValidCount里值 ,再time值
dataNew[el].push(item[el])
})
}
xAxis = dataNew.time;
var tableinfo = {
'keliu':[
{key:'notValidCount',name:'无效客流'},
{key:'validCount',name:'有效客流'},
],
}
var originData = tableinfo['keliu'];
var colors = ['#A10D30','#E98353','#F2C65C','#EC808D','#53B3E9'];
originData.forEach(function(item,index){
var type = 'column';
series.push({
type:type,
name:item.name,
color:colors[index],
data:dataNew[item.key]
}) })
console.log(xAxis,series,'希望的值')
下边是xAxis和series的值:

图表:

按highcharts中column形式转对象展现格式的更多相关文章
- (转)解决fasterxml中string字符串转对象json格式错误问题(无引号 单引号问题)
原文地址:解决fasterxml中string字符串转对象json格式错误问题 com.fasterxml.jackson.databind.ObjectMapper mapper = new com ...
- 解决fasterxml中string字符串转对象json格式错误问题
软件152 尹以操 springboot中jackson使用的包是fasterxml的.可以通过如下代码,将一个形如json格式string转为一个java对象: com.fasterxml.jack ...
- YII框架中可以使用foreach遍历对象以及可以使用数组形式直接访问对象的原因
YII框架中可以使用foreach遍历对象以及可以使用数组形式直接访问对象的原因在YII框架的使用过程中,我们可以使用foreach直接遍历findAll等方法返回的对象的属性为什么呢?其实这与CMo ...
- (原创)Java 读取 Highcharts 中的图片
前言:项目中提出一个新需求,就将Highcharts中的图片读取到Excel中.并在前台做下载,当听到这功能,第一想法是需要由后台编写程序,将数据写道图片中. 虽然没做过但是也没觉得太难,毕竟前辈们肯 ...
- 谈谈Delphi中的类和对象1---介绍几个概念 && 对象是一个地地道道的指针
参考:http://blog.163.com/liang_liu99/blog/static/88415216200952123412180/ 以下的介绍主要针对的是Delphi的面向对象的知识,可能 ...
- 初识python中的类与对象
这篇博客的路线是由深入浅,所以尽管图画的花花绿绿的很好看,但是请先关注我的文字,因为初接触类的小伙伴直接看类的实现可能会觉得难度大,只要耐着性子看下去,就会有一种“拨开迷雾看未来”的感觉了. 一.py ...
- buffer cache中,各个object对象占用的buffer blocks
buffer cache中,各个object对象占用的buffer blocks: COLUMN OBJECT_NAME FORMAT A40 COLUMN NUMBER_OF_BLOCKS FORM ...
- Python_day8_面向对象(多态、成员修饰符、类中特殊方法、对象边缘知识)、异常处理之篇
一.面向对象之多态 1.多态:简而言子就是多种形态或多种类型 python中不支持多态也用不到多态,多态的概念是应用与java/C#中指定传参的数据类型, java多态传参:必须是传参数的数据类型或传 ...
- javascript中的内置对象
2015.12.1 javascript中的内置对象 复习: 1.js中的内置函数 alert prompt write parseInt parseFloat eval isNaN document ...
- (转载)JavaScript中的Window窗口对象
(转载)http://www.ijavascript.cn/jiaocheng/javascript-window-65.html 例子: <html> <head> < ...
随机推荐
- 【Hadoop学习】下:MapReduce程序编写、Hadoop序列化、框架原理、Yarn组件、设置队列
一.MapReduce概述 1.定义 编程框架,组成分布式运算程序,运行在集群上 2.特点 优点:易于编程.扩展性.容错性(内部完成).海量数据离线处理 缺点:非实时.不擅长流式计算.不擅长DAG有向 ...
- (小白向)2020-12-18 中国大学MOOC第十二讲-动态变量应用
1创建单向链表(10分) 问题描述:根据随机输入的若干非零整数,以数字0结束:建立一个新链表. 输入:随机输入若干个整数,以数字0结束 输出:新建链表中个节点的值,数字间没有间隔字符. 样例:输入 5 ...
- 《HTTP权威指南》– 6.代理
代理的概念: Web代理服务器是网络的中间实体.位于客户端和服务器之间,扮演"中间人"的角色,在各端点之间来回传送HTTP报文. 私有和共享代理: 代理服务器可以是某个客户端专用的 ...
- java中的自增运算
本文主要阐明java中的自增运算 1.当i ++ 与 ++ i作为单独语句时,作用与i = i +1一样 2.当赋值时,结果就不一样了 temp = i ++: 操作顺序:1)temp = i: 2) ...
- 1+X Web初级笔记查漏补缺+练习题
学习笔记: position:relative是相对定位,是相对于自身位置移动,但是占据原有空间 absolute是绝对定位,原有空间不保留会被其他元素挤占 绝对定位 absolute不占位置完全浮动 ...
- 【转载】EXCEL VBA-区域选择
1- 区域命名 ThisWorkbook.Names.Item("foo").RefersTo =Tabelle1!$A$1:$B$1 ThisWorkbook.Names.Ite ...
- vue3+TS 自定义指令:长按触发绑定的函数
vue3+TS 自定义指令:长按触发绑定的函数 而然间看到一个在vue2中写的长按触发事件的自定义指定,想着能不能把他copy到我的vue3项目中呢. 编写自定义指令时遇到的几个难点 1.自定义指令的 ...
- 使用xshell连接linux虚拟机
目录 1.涉及的软件 2.连接步骤 2.1.虚拟机网络连接设置 2.2.配置linux的ip地址 2.3.关闭linux的防火墙 2.4.启动ssh服务 2.5.使用xshell连接linux 1.涉 ...
- [数据与分析可视化] D3入门教程2-在d3中构建形状
d3.js入门教程2-在 d3.js中构建形状 文章目录 d3.js入门教程2-在 d3.js中构建形状 形状的添加 圆形的添加 矩形的添加 线段的添加 文本的添加 折线的添加 区域的添加 圆弧的添加 ...
- JS生成下载文件
常用方式: /** * 生成下载文件 * @param {Object} filename * @param {Object} text */ function download(filename, ...