内容简介:因为横坐标日期太长了导致标题(销售量 订单数)和数据没有对齐,
因为横坐标日期太长了导致标题(销售量 订单数)和数据没有对齐, 官方手册 dataView有个optionToContent属性可以修改成表格,比如效果这样:
代码:
dataView : { show: true, readOnly: true, optionToContent: function(opt) { var axisData = opt.xAxis[0].data; var series = opt.series; var table = '<table class="layui-table" style="width:100%;text-align:center"><tbody><tr>' + '<td>时间</td>' + '<td>' + series[0].name + '</td>' + '<td>' + series[1].name + '</td>' + '</tr>'; for (var i = 0, l = axisData.length; i < l; i++) { table += '<tr>' + '<td>' + axisData[i] + '</td>' + '<td>' + series[0].data[i] + '</td>' + '<td>' + series[1].data[i] + '</td>' + '</tr>'; } table += '</tbody></table>'; return table; } }
但是有个不方便的地方,表格不能选中数据复制(为了方便得到数据,到Excel中去制作图表),不想因为好看放弃实用
然后就想到再做个下载表格功能。 找个一个教程,要修改源码,改不来,需要高大上的朋友可以参考
再然后期间想到方式,比如修改源码改下默认样式、optionToContent:function能否手写打印要的样式,像代码题要求打印9*9乘法表那样,都做不到(有兴趣的朋友可以试一下,顺便告诉我)
最后找到一个超级简单的办法:
series: [ {// 根据名字对应到相应的系列 name:'\t'+'销售量', //在这里加一个'\t' type:'line', yAxisIndex:0, data:self_sale_amount }, { name:‘订单数’, type:'line', yAxisIndex:1, data:self_order_count } ]
效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 数据对齐-编辑距离算法详解(Levenshtein distance)
- 原 荐 PostgreSQL中的数据位对齐——MAXALIGN
- Golang 内存对齐问题
- 你的内存对齐了吗
- CSS之文本两端对齐
- LWN: kmalloc( )确保对齐
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。