文档章节

十三、highchart实现看板功能

ssshen
 ssshen
发布于 2017/08/30 15:48
字数 465
阅读 6
收藏 0
点赞 0
评论 0

之前对比了ECharts和Highcharts,发现highchart文档更清晰,举的例子也简单明了;而echarts虽然看着很强大,热力图、平行坐标等,官网上列出了一大堆效果图的例子,但是,就是找不到头绪,最后就放弃了Echarts,改用highchart了,ORZ~
某乎上还有讨论:https://www.zhihu.com/question/21438840

html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="/static/js/jquery-2.1.0.js"></script>
    <script type="text/javascript" src="/static/js/json2.js"></script>
    <script type="text/javascript" src="/static/js/highcharts.js"></script>
    <script type="text/javascript" src="/static/js/highcharts-zh_CN.js"></script>
</head>
<body>
    <div class='mycontainer'>
        <br/>
        <div id="showChart"></div>
    </div>
</body>
</html>

javascript:

<script type="text/javascript">
$(document).ready(function(e) {
    loadData();
});

function displayOnChart(value, chartType) {
    /**
     * Highcharts 在 4.2.0 开始已经不依赖 jQuery 了,直接用其构造函数既可创建图表
     **/
    console.log(value['devTime']);
    console.log(value['number']);
    var chart = Highcharts.chart('showChart', {
        chart: {
            type: chartType
        },
        title: {
            text: '各部门情况概览'
        },
        xAxis: {
            categories: value['groups'],
            tickPosition: 'inside',
            // chartdiv宽度是1000px,刻度值平均分配
            tickPixelInterval: 1000 / value.length,
            crosshair: true
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.2f}</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true,
            positioner: function() {
                return {
                    x: 80,
                    y: 50
                };
            },
            shadow: false,
            borderWidth: 0
        },
        series: [{
            name: '开发耗时(h)',
            color: '#ED561B',
            data: value['devTime']
        }, {
            name: '测试耗时(h)',
            color: '#24CBE5',
            data: value['testTime']
        }, {
            name: '已上线需求(个)',
            color: 'blue',
            data: value['number']
        }]
    });
}

function loadData() {
    datas = {
        "number": [9, 13, 11, 9, 1, 35, 1, 4, 2],
        "devTime": [32.6, 229.6, 31.0, 67.6, 8.0, 235.2, 16.0, 248.0, 28.0],
        "groups": ["测试1", "测试2", "测试3", "测试4", "测试5", "测试6", "测试7", "测试8", "测试9"],
        "testTime": [12.9, 137.6, 25.5, 45.0, 8.0, 128.79999999999995, 2.5, 53.5, 20.0]
    };
    //可以传column展示柱状图,line展示折线图
    displayOnChart(datas, 'line');
}
</script>

效果如下:
输入图片说明
输入图片说明

jsfiddle上有对应的每个例子,可以参考API文档修改对应的参数,实现自己的目的;

参考文章:
时间不连续的曲线图 https://www.hcharts.cn/demo/highcharts/spline-irregular-time
Highcharts API文档 https://api.hcharts.cn/#Highcharts.dateFormat

© 著作权归作者所有

共有 人打赏支持
ssshen
粉丝 1
博文 32
码字总数 11112
作品 0
海淀
程序员
js实现svg图形转存为图片下载

我们知道canvas画布可以很方便的js原生支持转为图片格式并下载,但是svg矢量图形则并没有这方面原生的支持。 研究过HighChart的svg图形的图片下载机制,其实现原理大体是浏览器端收集SVG代码...

麦拂沙
2015/07/26
0
1
Highcharts实现图形报表(我主要实现javaweb开发的图形报表)

官网网址:https://www.hcharts.cn/ 中文版的(参考起来方便,你懂的。):http://www.mamicode.com/info-detail-446038.html 网上已经有很多详细的介绍,这里直接说怎么用了就; 必须引入的...

别叫小伙
2017/01/26
0
0
jeecg 3.1.0 RELEASE 发布

———————————————————————————————————————— version: jeecg-framework-3.1.0.RELEASE date: 2012-04-14 ————————————————————...

梦想起飞
2013/04/15
1K
3
Highchart属性笔记

Highchart一些平时不常用到的属性,偶尔想用时,查看API文档不易找到,耗费时间,本文只是为了让自己能够快速找到这些属性而记录的笔记。持续更新... 1.当图表没有数据时,图表中会显示相应的...

Smileswlin
01/18
0
0
请问echart不支持同时将xy轴设置为value值轴么

@Kener-林峰 你好,想跟你请教个问题:请问echart不支持同时将xy轴设置为value值轴么? 因为在使用highchart时,习惯性使用一下数据格式:data:[[13,15], [-50, -56.5], [-46.5, -22.1]],但是...

wwwei
2015/12/31
940
2
highcharts插件使用总结和开发中遇到的问题及解决办法

这里使用的highchart是2014-01-09从官网下载的版本,版本号是3.0.8, 当过了几天后,发现版本号变成了3.0.9,不由得的感叹highchart的版本更新之快。 在jsp中使用highchart的步骤: 第一步:...

imzdx
2015/12/04
0
0
多功能图表之highcharts的使用说明

highCharts可以说是一款知名度非常高的图表库,目前的highCharts可以支持直线图,曲线图,饼图等近18中图表 这两天也有机会接触highCharts中几款常用的图表 放图: 当然这里展示的混合是的图...

邪气小生
2015/12/23
529
0
js第三方插件(消息 图形)

1、SeaJS 实现JavaScript的模块化开发及加载机制 2、raphaeljs 实现跨浏览器的矢量图形实现方案 3、lhgcore.js 实现消息弹出框、表单验证、日历、下拉框、在线编辑组建 4、ymPrompt.js 实现消...

mingle
2015/11/30
97
0
require.js遇到的问题,求指点

在require.js里配置highchart.js时,遇到的问题 1.首先在全局中设置了highchart.js要使用的数据集 //在全局设置数据集 var data = new Object(); 2.然后配置highchart require.config({ }); ...

coco_ffqq
2015/03/05
212
0
请问highstock如何显示类别到图表上面或右边,跟highchart一样的形式

比如我要显示这些类别名称到图的右边 跟highchart显示的效果一样,请问如何添加配置,还是highstock不提供这种功能?

songzhi
2015/02/05
432
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Git GUI Client

Git GUI Client   这里我们为大家收藏了众多Git的GUI客户端,下载请点击这里

qwfys
7分钟前
0
0
SpringBoot | 第九章:Mybatis-plus的集成和使用

前言 本章节开始介绍数据访问方面的相关知识点。对于后端开发者而言,和数据库打交道是每天都在进行的,所以一个好用的ORM框架是很有必要的。目前,绝大部分公司都选择MyBatis框架作为底层数...

oKong
11分钟前
2
0
win10 上安装解压版mysql

1.效果 2. 下载MySQL 压缩版 下载地址: https://downloads.mysql.com/archives/community/ 3. 配置 3.1 将下载的文件解压到合适的位置 我最终将myql文件 放在:D:\develop\mysql 最终放的位...

Lucky_Me
17分钟前
1
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

问题终结者
31分钟前
1
0
expect脚本同步文件expect脚本指定host和要同步的文件 构建文件分发系统批量远程执行命令

expect脚本同步文件 在一台机器上把文件同步到多台机器上 自动同步文件 #!/usr/bin/expectset passwd "123456"spawn rsync -av root@192.168.133.132:/tmp/12.txt /tmp/expect {"yes...

lyy549745
32分钟前
0
0
36.rsync下 日志 screen

10.32/10.33 rsync通过服务同步 10.34 linux系统日志 10.35 screen工具 10.32/10.33 rsync通过服务同步: rsync还可以通过服务的方式同步。那需要开启一个服务,他的架构是cs架构,客户端服务...

王鑫linux
40分钟前
0
0
matplotlib 保存图片时的参数

简单绘图 import matplotlib.pyplot as pltplt.plot(range(10)) 保存为csv格式,放大后依然很清晰 plt.savefig('t1.svg') 普通保存放大后会有点模糊文件大小20多k plt.savefig('t5.p...

阿豪boy
44分钟前
1
0
java 8 复合Lambda 表达式

comparator 比较器复合 //排序Comparator.comparing(Apple::getWeight);List<Apple> list = Stream.of(new Apple(1, "a"), new Apple(2, "b"), new Apple(3, "c")) .collect(......

Canaan_
昨天
0
0
nginx负载均衡

一、nginx 负载均衡 拓扑图: 主机信息: 1、负载均衡器1(lb1):192.168.10.205 RHEL7.5 2、负载均衡器2(lb2):192.168.10.206 RHEL7.5 3、web服务器1(web01):192.168.10.207 Centos...

人在艹木中
昨天
0
0
做了一个小网站

做了一个小网站 www.kanxs123.com

叶落花开
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部