精华内容
下载资源
问答
  • 上一篇文章总结了vue树状目录组件,忘记的可以点击传送门回顾一下:vue目录树组件还是这个目录树,改版成表格树状结构。我这里采用的UI库是Element,库自带了一种实现方式:但是这种自带的实现方式,可扩展性很差,...
    这绝对是我最后一次写树状结构,我非常的确定一定以及肯定! 上一篇文章总结了vue树状目录组件,忘记的可以点击传送门回顾一下: vue目录树组件

    bc5e2758c9b76990f040e6ec57a9102e.png

    还是这个目录树,改版成 表格树状结构

    我这里采用的UI库是Element,库自带了一种实现方式:

    6732105863d2bfe2cd5e093cd71b47ad.png

    但是这种自带的实现方式,可扩展性很差,就很low,而且这样偷懒会让自己的技术止步不前,心里不安呀。

    首先明确实现逻辑,表格树状结构中所谓的树状,并不是数据结构上的树状,只是布局上的效果而已,这里要求的数据结构是平级的数据列表

    还是上篇文章中说的,后端直接返回树状结构数据。

    e8271c8920ade390f2acde8d81a5ddf9.png

    所以这里需要对数据处理一下,将树状结构的数据转换成平级的。getTreeList 方法中调用接口先获取到后端数据。

    getTreeList() {    this.treeList = [];    Catalog.getListByParent(this.catalogId).then((res) => {    if (res.status === 0) {        const treeList = res.data || [];        const tableList: ITree[] = [];        this.setCatalogList(tableList, treeList);        this.treeList = treeList;        this.tableList = tableList;    }  });},

    这里有个需要注意的点,接口返回的数据并没有直接赋给 this.treeList ,因为直接赋值之后 vue 不会一直监听数据的变化,而树状结构是需要在原有数据上修改的,例如 setCatalogList 方法中将树状结构数据转换成平级列表数据,所以定义个常量中间过渡一下,防止数据不实时更新。

    setCatalogList(arr: ITree[], treeList: ITree[]) {  treeList.forEach((item) => {    arr.push(item);    if (item.catalogTreeVoList && item.catalogTreeVoList.length > 0) {        this.setCatalogList(arr, item.catalogTreeVoList);    }  });},

    因为树状列表中一些交互操作,如收起展开子节点,需要前端自定义一些字段属性用来控制,所以还需要将拿到的数据再构建一个map对象,更方面后面对自定义字段属性的操作。

    将this.treeList 完善一下。

    getTreeList() {    this.treeList = [];    Catalog.getListByParent(this.catalogId).then((res) => {    if (res.status === 0) {        const treeList = res.data || [];        const tableList: ITree[] = [];        const treeMap: ITreeMap = {};        this.setCatalogList(tableList, treeList);        this.setCatalogMap(treeMap, treeList, 0);        this.treeList = treeList;        this.tableList = tableList;        this.treeMap = treeMap;    }  });},setCatalogMap(catalogMap: ITreeMap , list: ITree[], level: number) {  list.forEach((item, index) => {    catalogMap[item.catalogId] = item;    item.level = level;    item.index = index;    if (item.catalogTreeVoList && item.catalogTreeVoList.length > 0) {        this.setCatalogMap(catalogMap, item.catalogTreeVoList, level + 1);    }  });},

    这时候打印一下treeList,tableList或者treeMap,会发现数据中已经添加了level和index字段。但这里暂时不用,后面其他操作的时候需要用的。

    那对于树状列表最基础的收起展开操作,需要的字段是isOpen和isShow,我们这里规定isOpen控制展开收起图标的切换,isShow控制子节点的显示和隐藏。

    这两个字段的添加还是在this.treeList 中,完整的this.treeList 代码如下:

    getTreeList() {    this.treeList = [];    Catalog.getListByParent(this.catalogId).then((res) => {    if (res.status === 0) {        const treeList = res.data || [];        const tableList: ITree[] = [];        const treeMap: ITreeMap = {};        this.setCatalogList(tableList, treeList);        this.setCatalogMap(treeMap, treeList, 0);        Object.keys(treeMap).forEach((key) => {          const item = treeMap[key];          if (this.treeMap[key]) {              item.isOpen = this.treeMap[key].isOpen;              item.isShow = this.treeMap[key].isShow;          } else {              item.isOpen = true;              item.isShow = true;          }        });        this.treeList = treeList;        this.tableList = tableList;        this.treeMap = treeMap;    }  });},

    其实,应该先给出页面结构的代码

      ref="table"  :data="tableList"  :row-class-name="cellClass">            
    {{scope.row.catalogName}}
    上移 下移 编辑 删除

    展开收起操作的实现逻辑,就是修改isOpen的值,但是相应的判断当前节点的子节点的显示和隐藏

    当子节点存在的时候,如果是要收起当前节点,就很简单的不用管子节点的状态,全部隐藏就好。如果是要展开当前节点,isOpen为真所有子节点显示,否则隐藏。

    tabNode(node: ITree) {  this.treeMap[node.catalogId].isOpen = !this.treeMap[node.catalogId].isOpen;  this.statusChange(node, node.isOpen);},statusChange(data: ITree, status: boolean) {  if (data.catalogTreeVoList) {    data.catalogTreeVoList.forEach((childEl: ITree) => {        if (status) {            if (data.isOpen) {                childEl.isShow = true;            } else {                childEl.isShow = false;            }        } else {            childEl.isShow = status;        }        if (childEl.catalogTreeVoList) {            this.statusChange(childEl, status);        }    });  }},

    isShow控制子节点显示或隐藏,是基于Element表格自带的一个方法,这里的类名rowNone就是display: none。

    cellClass({ row, rowIndex }: ITableRow) {    if (!row.isShow) {        return "rowNone";    }},

    上篇文章结尾处提到的上下移排序的问题,这里需要做相应的改变,就是用到了前文写的index字段。

    上移排序的逻辑,修改当前节点和上一个节点的下标值,就是经典的基础题:a=1,b=2,交换a,b的值,这就需要定义个中间变量过渡一下。最后会发现点击上移之后,打印出来的数据修改了,但是页面并没有更新。

    这是因为index字段是在构建map对象时定义的,修改index的值只会让treeList更新,而此时排序需要修改的数据是tableList,所以最后还需要重新调用 setCatalogList ,将最新的treeList转换成tableList。

    doUp(node: ICatalogModel, index: number) {    if (index === 0) {        return;    }    const parentId: string = node.catalogParent as string;    const parentItem: ICatalogModel = this.treeMap[parentId];    let dataList: ICatalogModel[] = [];    // 如果为空则是顶级    if (parentItem) {        if (parentItem.catalogTreeVoList) {            dataList = parentItem.catalogTreeVoList;        }    } else {        dataList = this.treeList;    }    const beforeItem = dataList[index - 1];  // a    const item = dataList[index];  // b    // 中间变量    let itemIndex: number = 0;       // c    itemIndex = item.index;         // c = b    item.index = beforeItem.index; // b = a    beforeItem.index = itemIndex; // a = c    dataList.splice(index, 1);    dataList.splice(index - 1, 0, item);    this.doSaveSort(dataList);    const tableList: ITree[] = [];    this.setCatalogList(tableList, this.treeList);    this.tableList = tableList;},

    相应的下移操作,修改的是当前节点和下一个节点的下标值,就不赘述了。

    最后效果如下(样式没咋优化):

    afab5ea7a3137d850ff89f086881a4e4.png


    最后的上移下移的操作只是附带的,这篇文章主要总结的还是表单树状结构的实现,磨了一下午,这算是最彻底完整的一次总结了,但其中还是存在了一些没理解透的点,如表单选中的问题,还需要多练习。 over~ 下班
    展开全文
  • 三、基本表、树状图、气泡图、词云 1.基本表 基本表是表格的可视化表达方式。 1.1 基本表的使用 导入“酒店数据.xlsx”,新建工作表为【基本表】 将【维度】下的【地区】拖入到【行】中,就形成了一个表格。 将...

    三、基本表、树状图、气泡图、词云

    1.基本表

    基本表是表格的可视化表达方式。

    1.1 基本表的使用

    导入“酒店数据.xlsx”,新建工作表为【基本表】

    将【维度】下的【地区】拖入到【行】中,就形成了一个表格。

    在这里插入图片描述

    将【度量】下的【记录数】拖到【标记】下的【文本】上,表格显示出各地区记录数。一个基本表就做好了。

    在这里插入图片描述

    1.2 凸显表的使用

    凸显表相比基本表,使用的时候更多。

    复制工作表【基本表】,命名为【不同地区酒店数量凸显表】

    有两种方式做凸显表

    第一种:智能显示

    点击【智能显示】下的【凸显表】,自动生成。凸显表和基本表的区别在于凸显表有颜色不一的色块。数据大则颜色深。

    在这里插入图片描述

    可以点击【智能显示】下的【基本表】,恢复过来。

    在这里插入图片描述

    第二种:【标记】——【方形】

    将【度量】下的【记录数】拖到【标记】下的【颜色】上,表格颜色发生变化。

    在这里插入图片描述

    选择【标记】下【自动】里的【方形】,则变成凸显表。

    在这里插入图片描述

    二值凸显表

    二值凸显表是一种非此即彼的凸显表。

    选择【标记】下【颜色】——【编辑颜色】。

    【色板】选择【红色-蓝色发散】,【渐变颜色】选择2阶,勾选【倒序】,点击【高级】,【中心】填10(即以10家酒店数量为中心,包括10及10以上为红,10以下为蓝)。点击【确定】。

    在这里插入图片描述

    最右边出现了-165,这并不是错误,而是因为我们以10位中心,两边要对称,则一边是185,另一边出于对称是-165。

    在这里插入图片描述

    2.树形图

    树形图类似七巧板。

    2.1 不同酒店类型与酒店数量

    将【维度】下【类型】拖到【行】中,将【度量】下【记录数】拖到【列】中。

    在这里插入图片描述

    点击【智能显示】下的【树形图】,则自动生成。树形图以面积和颜色深浅表示数量多少。

    在这里插入图片描述

    选择【标记】下【颜色】——【编辑颜色】,【色板】选择【红色-绿色发散】,勾选【倒序】,点击【确定】。

    在这里插入图片描述

    2.2不同类型电影数量与票房

    导入“中国电影网电影_data.xlsx”,新建【工作表9】。

    右击【累计票房】——【拆分】,隐藏【累计票房】列,保留拆分后数据。

    右击【类型】——【自定义拆分】,分隔符为/,隐藏【类型】列,重命名拆分后数据列为【类型1】。

    在这里插入图片描述

    在【工作表9】中,将【维度】下的【类型1】放到【行】中,将【度量】下的【记录数】放到【列】中。

    在这里插入图片描述

    点击【智能显示】——【树形图】。这时,树形图的面积大小和颜色都是表示电影数量。

    在这里插入图片描述

    右击【维度】下【累计票房 - 拆分 1】,重命名为【累计票房(万)】,拖到【度量】下,再拖到【标记】下的【颜色】里。

    这时,颜色深浅表示票房多少,面积大小表示电影数量多少。

    在这里插入图片描述

    将【工作表9】命名为【不同类型电影数量与票房树形图】。

    选择【标记】下【颜色】——【编辑颜色】,【色板】选择【红色-绿色发散】,勾选【倒序】,点击【确定】。

    在这里插入图片描述

    将【度量】下——【累计票房】放到【标记】下的【标签】上,右击【设置格式】。

    在这里插入图片描述

    【数字(自定义)】中的【小数位数】为0,【显示单位】为“千(K)”。

    在这里插入图片描述

    这样就添加上了票房标签。

    在这里插入图片描述

    将【度量】下——【记录数】放到【标记】下的【标签】上。

    在这里插入图片描述

    修改标签

    点击【标记】下【标签】,点击【文本】边的【…】,在【编辑标签】里添加文字,点击【确定】。

    在这里插入图片描述

    删除比较少的数据

    树形图中右下角很多面积比较小,没有显示,想删除掉。

    在这里插入图片描述

    方法1:筛选器

    将【维度】下【类型1】放到【筛选器】里筛选。

    方法2 : 右击【筛选器】

    右击【筛选器】——【记录数总和】

    在这里插入图片描述

    右边显示【总和(记录数)】的进度条,可以通过拖拉和填写数字来调整记录数。

    在这里插入图片描述

    2.3香港不同地区酒店数量与价格

    新建【工作表】,重命名为【不同地区酒店数量与价格】

    将【维度】下【地区】放入【行】,将【度量】下的【记录数】放入【列】。

    在这里插入图片描述

    点击【智能显示】下的【树形图】,自动生成。

    在这里插入图片描述

    拖走【总和(记录数)】颜色,将【度量】下的【价格】拖到【颜色】上。

    在这里插入图片描述

    价格求总和无意义,应该用价格的平均值。右击【总和(价格)】——【度量(总和)】——【平均值】。

    在这里插入图片描述

    选择【标记】下【颜色】——【编辑颜色】,【色板】选择【红色-绿色发散】,勾选【倒序】,点击【确定】。

    在这里插入图片描述

    将【度量】下的【记录数】和【价格】放到【标记】的【标签】下,生成标签,右击【价格】——【度量】——【平均值】。

    在这里插入图片描述

    点击【标记】下【标签】,点击【文本】边的【…】,在【编辑标签】里添加文字,点击【确定】。

    在这里插入图片描述

    3.气泡图与词云

    3.1不同类型电影数量与票房

    新建工作表,重命名为【不同类型电影数量与票房气泡图】

    将【维度】下的【类型1】放到【行】中,将【度量】下的【记录数】放到【列】中。

    在这里插入图片描述

    点击【智能显示】——【气泡图】。点击【整个视图】。

    在这里插入图片描述

    按ctrl键,将【类型1】拖到【颜色】上,增加颜色。

    在这里插入图片描述

    因为是求不同类型电影数量与票房,将【类型1】颜色拖走,将【累计票房(万)】拖到【颜色】上。

    选择【标记】下【颜色】——【编辑颜色】,【色板】选择【红色-绿色发散】,勾选【倒序】,点击【确定】。

    在这里插入图片描述

    3.2动作电影动态气泡图

    动态图一般要把时间概念引入进来。

    新建工作表,重命名为【动作电影动态气泡图】

    将时间放入页面

    要做动态图,时间一定要放入到【页面】中。

    右击【维度】下的【上映时间】——【更改数据类型】——【日期】。

    在这里插入图片描述

    将【上映时间】移到【页面】中。

    在这里插入图片描述

    双击【页面】下的【年(上映时间)】,去掉Null值。

    在这里插入图片描述

    将【维度】下的【类型1】放到【筛选器】里,勾选【动作】,从而筛选出动作电影。

    在这里插入图片描述

    将【度量】下的【记录数】放入【行】中,将【累计票房(万)】放入【列】中。

    在这里插入图片描述

    拖动进图条,可以看到气泡在移动。

    在这里插入图片描述

    点击【大小】修改点的大小;点击【标记】下【自动】,选择【形状】,在下方【形状】里选择空心气泡。

    在这里插入图片描述

    点击右边的【动作播放】按钮,气泡可以动,点击【慢】、【普通】或【快】按钮,可以控制速度。

    在这里插入图片描述

    点击【年(上映时间)】的下拉三角,勾选【循环播放】,点击【动作播放】按钮,可以循环播放。如果要取消循环播放,点击中间的方块按钮。(点击方块左边的三角按钮,是时间倒序播放;点击方块右边的三角按钮,是时间正序播放)

    在这里插入图片描述

    勾选【显示历史记录】,点击下拉三角,选择【全部】、【两者】,轨迹的【格式】选择虚线和橙色。

    在这里插入图片描述

    在这里插入图片描述

    也可以不选择【两者】,选择【轨迹】,根据自己需要。

    在这里插入图片描述

    点击【筛选器】的【类型1 :动作】的下拉三角,【编辑筛选器】,增加【爱情】和【剧情】。

    在这里插入图片描述

    将【维度】下的【类型1】拖放到【颜色】上,这样就形成三个轨迹。

    在这里插入图片描述

    也可以【显示历史记录】中选择【已选定】和【标记】,这样只显示气泡变化,不显示轨迹。

    在这里插入图片描述

    3.3词云图制作

    制作电影类型词云图。

    新建工作表,重命名为【词云图制作】。

    将【类型1】拖入【行】中,将【记录数】拖到【大小】上。

    在这里插入图片描述

    点击【智能显示】——【气泡图】。

    在这里插入图片描述

    将【类型1】放到【颜色】里。

    在这里插入图片描述

    选择【标记】下【自动】里的【文本】,词云图搞定。

    在这里插入图片描述

    展开全文
  • 前言 本文的文字及图片来源于网络,仅供学习、交流...那么,今天我们试着python爬取最近交易日的股票数据,并试着excel简单绘制上面这个树状图。 爬取网易财经各板块股票数据 excel树状图 简单的树状图 带有增长率的

    前言

    本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理。

    大家好,最近大A的白马股们简直跌妈不认,作为重仓了抱团白马股基金的养鸡少年,每日那是一个以泪洗面啊。

    在这里插入图片描述

    不过从金融界最近一个交易日的大盘云图来看,其实很多中小股还是红色滴,绿的都是白马股们。

    以下截图来自金融界网站-大盘云图:

    在这里插入图片描述

    那么,今天我们试着用python爬取最近交易日的股票数据,并试着用excel简单绘制上面这个树状图。

    爬取网易财经各板块股票数据
    excel树状图
    简单的树状图
    带有增长率的树状图
    一.爬取网易财经各板块股票数据
    目标网址:

    http://quotes.money.163.com/old/#query=hy010000&DataType=HS_RANK&sort=PERCENT&order=desc&count=24&page=0
    在这里插入图片描述

    由于这个爬虫部分比较简单,这里不做过多赘述,仅介绍一下思路并附上完整代码供大家参考。

    爬虫思路:

    请求目标网站数据,解析出主要行业(新)的数据:行业板块名称及对应id(如金融,hy010000)

    根据行业板块对应id构造新的行业股票数据网页

    由于翻页网址不变,代入参数,获取全部页数,然后翻页爬取全部数据

    爬虫代码:

    # -*- coding: utf-8 -*-
    """
    Created Feb 28 10:30:56 2021
    @author: 可以叫我才哥
    """
    
    import requests
    import re
    import pandas as pd
    
    # 获取全部板块及板块id
    url = 'http://quotes.money.163.com/old/#query=hy001000&DataType=HS_RANK&sort=PERCENT&order=desc&count=24&page=0'
    
    r = requests.get(url)
    
    html = r.text
    # 替换非字符为空,便于下面的正则
    html = re.sub('\s','',html)
    # 正则获取 板块及id所在区域
    labelHtml = re.findall(r'</span>主要行业\(新\)</a>(.*?)</span>证监会行业\(新\)',html)[0]
    # 正则板块和id,结果为由元组组成的列表
    label = re.findall(r'"qid="(hy.*?)"qquery=.*?"title="(.*?)">',labelHtml)
    # 转化为dataframe类型
    dfLabel = pd.DataFrame(label,columns=['id','板块'])
    
    # 根据板块id和翻页获取页面数据(json格式)
    def get_json(hy_id, page):
        query = 'PLATE_IDS:' + str(hy_id)
        params={
            'host': 'http://quotes.money.163.com/hs/service/diyrank.php',
            'page': page,
            'query': query,
            'fields': 'NO,SYMBOL,NAME,PRICE,PERCENT,UPDOWN,FIVE_MINUTE,OPEN,YESTCLOSE,HIGH,LOW,VOLUME,TURNOVER,HS,LB,WB,ZF,PE,MCAP,TCAP,MFSUM,MFRATIO.MFRATIO2,MFRATIO.MFRATIO10,SNAME,CODE,ANNOUNMT,UVSNEWS', #你可以不用这么多字段
            'sort': 'PERCENT',
            'order': 'desc',
            'count': '24',
            'type': 'query',
            }
        url = 'http://quotes.money.163.com/hs/service/diyrank.php?'
        r = requests.get(url,params=params)
        j = r.json()
        
        return j
    
    # 空列表用于存取每页数据
    dfs = []
    # 遍历全部板块
    for hy_id,板块 in dfLabel.values:
        # 获取页数
        j = get_json(hy_id, 0)
        pages = j['pagecount']
        
        for page in range(pages):
            j = get_json(hy_id, page)
            data = j['list']
            df = pd.DataFrame(data)
            df['板块'] = 板块
            dfs.append(df)
        print(f'已爬取{len(dfs)}个板块数据')
    
    result = pd.concat(dfs)     
    

    二.绘制Excel树状图
    excel树状图是在office2016级之后版本中新加的图表类型,想要绘制需要基于此版本及之后的版本哦。

    简单的树状图绘制流程:框选数据—>插入—>图表—>选中树状图 即可。
    在这里插入图片描述

    以下图为例,在树状图中,每个色块代表一个省份,色块面积大小则由其GDP值大小决定。

    在这里插入图片描述

    三.带有增长率的树状图
    我们发现,在基础的树状图中,色块颜色除了区别色块之外并没有其他特殊含义。拿GDP来说,除了值之外我们一般也会去看其增长率,那么是否可以让色块颜色和增长率有关联呢?

    下面我们试着探究一下,如果成功的话,那么金融界的大盘云图似乎也可以用excel树状图来进行绘制了不是!

    1.思路:
    我们希望色块颜色能代表增长率,比如红色是上涨,绿色是下降且颜色越深代表绝对值越大

    再对每个色块进行对应的颜色填充即可

    由于 树状图顶多支持多级,色块颜色也只能手动单一填充,怎么办呢?既然手动可以,那么其实就可以用VBA自动化这个过程咯。

    2、增长率配色
    基于上述思路,我们需要对增长率进行配色,最简单的就是用条件格式里的色阶。

    框选增长率数据—>开始—>条件格式—>色阶(选中那个让值越大颜色越红的,由于这里有负增长率,所以选了带红绿的):

    在这里插入图片描述

    为了更好的展示区分正负增长率,我们在设置完色阶后再进行管理规则:

    我们将中间值设为数字0,这样负增长率就是绿色,正增长率就是红色;

    我们将最大值设置为百分点值80,也就是增长率前80%的值都是最红的。

    在这里插入图片描述

    最终配色效果:

    在这里插入图片描述

    四.VBA填充色块颜色
    先看效果:

    湖北因为收到疫情影响最大,有接近小半年属于封省状态,全年增长率为负数。

    在这里插入图片描述

    由于条件格式下单元格颜色是不固定的无法通过vba获取,我们需要将颜色赋值到新的一列中去,需要用到如下操作:

    选中增长率数据复制,然后点击剪切板最右下角会出现剪贴板,再鼠标左键选择需要粘贴的地方如E2,点击剪贴板c#教程中需要粘贴的数据即可。 这个时候,被粘贴的单元格区域的颜色就是固定的了,你可以选择删除数据只留颜色部分。

    在这里插入图片描述

    VBA思路:

    激活需要操作的图表(Activate)
    遍历全部的系列和数据点(ActiveChart.FullSeriesCollection(1).Points.Count)
    从第一个数据点开始,获取对应增长率python基础教程单元格颜色(ActiveSheet.Range(“E” & i + 1).Interior.Color)
    将单元格赋值给该数据点(Selection.Format.Fill.ForeColor.RGB)
    VBA代码:

    Sub My_Color()
     
     ActiveSheet.ChartObjects("图表 1").Activate
     '遍历全部的数据点
     For i = 1 To ActiveChart.FullSeriesCollection(1).Points.Count
     '选中数据点
     ActiveChart.FullSeriesCollection(1).Points(i).Select
     '获取单元格颜色
     MyColor = ActiveSheet.Range("E" & i + 1).Interior.Color
     '将单元格颜色赋值给对应数据点填充色
     Selection.Format.Fill.ForeColor.RGB = MyColor
     Next
    

    执行脚本过程如下:

    在这里插入图片描述

    好了,以上就是本次全部内容,大家可以试着爬取股票数据,然后试着绘制一下。

    展开全文
  • 7.2 凸显表的使用 凸显表的制作有两种方法:智能显示和用标记做。 ①智能显示 步骤: 地区->,记录数->文本(拖放) 智能显示选择凸显表(第三个) ②用标记做 步骤: 地区->,记录数->文本,记录数->颜色(拖动) ...
    	随着操作的增多,有一些步骤会省略,因为这个前面真的没什么难度,只需要多操作即可!
    

    7、基本表

    7.1 基本表的使用

    步骤:
    地区->列,记录数->文本(拖放)
    1
    在可视化里,我们用到更多的是凸显表,因为基本表我们通过Excel就能够实现。在可视化中意义不大。

    7.2 凸显表的使用

    凸显表的制作有两种方法:智能显示和用标记做。
    ①智能显示
    步骤:
    地区->列,记录数->文本(拖放)
    智能显示选择凸显表(第三个)

    2
    ②用标记做
    步骤:
    地区->列,记录数->文本,记录数->颜色(拖动)
    标记选为“方形 ”

    3
    ③二值凸显表
    提到凸显表时,二值凸显表不得不提。
    步骤:
    颜色->编辑颜色->渐变颜色(2阶)/倒序/中心(10)
    4
    上面的标记为操作步骤。

    8、树形图

    8.1 不同类型电影数量与票房

    根据做这个图形的要求,我们可以看到了类型的数据类,但是根据数据我们可以看到类型并没有拆分成我们需要的类型,这时我们可以通过拆分表格来完成:
    5
    这时准备工作做好了,下面就可以作图了:
    ①主要类型->列,记录数->行,累计票房->颜色。智能显示选择第一个往下数4的树状图。
    6
    ==②票房替代记录数:颜色总和->删除,累计票房(万)->颜色 ==
    7
    ③筛选出票房大于某值的类型:图的右侧空白点击右键->筛选器->累计票房。在右侧大小轴随意拖动选择筛选值
    8
    上述对比不明显,我一半选择自定义颜色。
    9
    ④票房数据与电影数量:票房数据(万)->标签,标签->设置格式->默认值:数字->数字自定义->小数位数(0)
    10
    ⑤自定义标签:标签->文本->编辑
    11

    8.2 香港不同地区酒店数量与价格

    ①地区->列,记录数->行,价格(应该显示为平均值)->颜色。智能显示选择树状图。
    12
    ②价格替代颜色:颜色总和->删除,累计票房(万)->颜色,价格->维度->平均值
    13
    ③设置标签:记录时->标签,价格->标签
    14
    ③筛选出票房大于某值的类型:图的右侧空白点击右键->筛选器->累计票房。在右侧大小轴随意拖动选择筛选值

    9、气泡图与词云

    9.1 不同类型电影数量与票房(气泡图)

    步骤如下:
    主要类型->行,记录数->列,票房->颜色。智能显示选择气泡图(最后一个)。票房1->颜色
    15
    16
    上图为电影数量。两个图对比,发现添加颜色后更美观。下图展示为电影票房。
    17

    9.2 动作电影动态气泡图

    动态图要怎样做:做动态图时,一般要把时间引入进来,随着时间产生变化,最后形成动态图。
    我们在做动态图时,先提前把上映日期转换成日期类型:
    18
    步骤:
    ①上映年份->页面,记录数->行,累计票房->列
    ②筛选年份(去掉NULL),筛选主要类型(动作)
    上面的两步在前面已经多次出现就不演示了。
    ③标记选择形状也可选择点的类型(2选1)
    19
    ④右侧上映年份:下拉列表->循环播放。显示历史记录下拉列表->全部、两者、格式为虚线颜色橘黄色
    20
    上图真实效果为动态图,运行轨迹可以显示也可以不显示。个人感觉这种图形非常适合当下的疫情感染人数和治愈人数。

    此外制作动图要注意:
    1、一定要把时间放到页面内,页面选项卡是做动图的
    2、根据实际情况选择显示历史记录的选项
    3、选择正确的横纵坐标轴

    9.3 词云图制作

    首先词云图我们要知道在智能显示里是没有的,这时我们可以通过创建气泡图->标记->自动->文本创建。
    步骤如下:
    ①画一个气泡图:主要类型->文本,记录数->大小,记录数->颜色。智能显示选择饼图
    21
    ②转换为词云图:标记->文本
    22
    下面为最终效果图:
    23

    展开全文
  • 为了方便调用, 把每一种绘制的方法函数封装起来 """ plt.figure(num=1,figsize=(12,8),alpha=0~1) # num是第几张图, figsize定义尺寸,alpha透明度 plt.add_subplot(1,1,1) # add_subplot(行,,第几个) plt....
  • 4、利用pack函数打印模拟Excel格式的断句符号,这种更接近于Excel标准格式,office2003修改后保存,还不会弹提示,推荐这种方法。 缺点是无格式。 PHP代码 : php // Send Header header (”...
  • 树状数组 讲解题目集

    千次阅读 2016-10-09 21:28:40
     树状数组作为一种实现简单、应用较广的高级数据结构,在OI界的地位越来越重要,下面我来简单介绍一下树状数组它的简单应用。 一、树状数组简介 树状数组:顾名思义,是一种数组,其中包含了树的思想。它是...
  • 树状数组

    2021-03-31 18:01:42
    树状数组课前知识lowbit功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个...
  • 通过对以上子元素的使用,以及属性的添加修改,我们可以设计符合自己需要的表格。在设计一张课程表的过程中,我遇到了疑问。一行宽度为100%,分9,第一二格合并,如何设置单元格宽度才能达到后面每一格宽度相同...
  • PyQt5——表格与树

    千次阅读 2019-09-23 15:13:40
    在通常的情况下,一个应用需要一批数据(比如数组、列表)进行交互,然后以表格的形式的形式输出这些信息,这是就要用到QTableView类了。在QTableView中可以使用自定义的数据模型来显示内容,通过setModel来绑定...
  • 树状数组及其应用

    千次阅读 2015-04-22 21:15:38
    利用树状数组解决几类问题      树状数组作为一种实现简单、应用较广的高级数据结构,在OI界的地位越来越重要,下面我来简单介绍一下树状数组它的...它可以方便地查询一段区间中的数字之。其查询修改的时
  • 先写代码:第一个函数int LowBit(int x) //求 最小幂2^k{ return x &... } 第二个函数int getSum(int pos) //求前n项 { int sum = 0; while(pos &gt; 0) { sum += arr[pos]; ...
  • Qt实现表格树控件-支持多级表头

    千次阅读 2019-08-04 23:12:53
    文章目录一、概述二、效果展示三、实现方式四、多级表头1、数据源2、表格3、QStyledItemDelegate绘制代理五、测试代码六、相关文章 原文链接:Qt实现表格树控件-支持多级表头 一、概述 之前写过一篇关于表格控件多级...
  • 树状数组详解

    2019-10-08 07:12:47
    一、引入概念 平常我们会遇到一些对数组进行维护查询的操作,比较常见的,修改某点的值、求某个区间的。 数据规模不大的时候,对于修改某点的值是非常容易的,复杂度是O(1),但是对于求一个区间的就要扫一遍...
  • 1、先来看一下效果,第一个是嵌套表格的,第二张图片是带checkbox的 嵌套子表格核心代码(用到的数据提前在data中定义好) 点击查看权限后弹嵌套子表格,也就是第一张图片的样子 data() { return { ...
  • EJS TreeGrid,性能功能世界第一的表格控件(树状表格) EJS TreeGrid是一个完全javascript实现的DHTML组件,可以用来在网页上显示编辑表格,数据表,树状结构,树形表格...
  • 原文来自方案网 ...   关键字:TreeGrid,树型表格,表格,ajax表格,性能好,功能强大,Grid ...EJS TreeGrid,性能功能世界第一的表格控件(树状表格) EJS TreeGrid 是一个完全javascript实现的DHT
  • 基本上,这个表格控件作为OA系统的主角,配合《【ExtJs】利用树状结构、Border布局与标签页刻划OA界面》(点击打开链接)就真的是一个完整的OA系统了。 然而网上对于此组件的叙述非常糟糕,各类杂七杂八的资料,层...
  • 最近在写一个商品分类管理的功能,本来想layui的树形组件来写,但发现layui原生的tree只能展示title,而分类的其他字段无法展示,这就有点不适用了,无意中看到一位大神自定义写的一个树形表格组件,正好满足我的...
  • javafX8初探(树形表格

    千次阅读 2015-02-09 16:07:45
    本章描述TreeTableView用户组件,这个组件让你能够在中设计可视化的无限制层级数据。 TreeTableViewTreeViewTableView有共同之处。它结合了两者的功能。 创建一个TreeTableView控件   一个基本的...
  • SpreadJS 纯前端表格控件正式发布V11 版本。新版本亮点颇多,不但为用户带来期待已久的图表功能,还新增前端导出 PDF、分组等功能,在数据可视化方面更进一步,受到了开发人员的广泛关注。
  • 树形表格的查询方法

    千次阅读 2019-07-07 21:57:56
    一、在上周我在做项目的时候遇到了一个树形的样式,因为树形的获取数据平时的查询功能不一样所以,所以我的树形是通过插件的方式来显示的,因为获取不了数据,所以这个功能困扰我几天还是没有做到我自己的...
  • HTML教程(6)- 表格

    2019-06-09 21:43:02
    在上一篇中我们简单的说到了属性元素的一些知识 那么在本篇中呢会讲到HTML中的表格标签 怀着学习进步的心态接着往下看吧 加油! 下面进入正题 表格[table] 在我们的HTML中 表格是使用table标签来进行声明的 ...
  • 最近markdown文档写的比较多,就想找一个喜欢的markdown编辑器,支持文档树状目录结构的那种,网上搜了一些,发现大部分并不支持树状目录,要不就是界面实在太丑,或者太卡顿。基本都试用了一圈后,整理了几款我个人...
  • 实际需要写逻辑动态生成数据渲染表格。logicDatatableData都是写死数据。实际logicData数组中元素都是可以不断添加的,tableData为表格所需数据(需根据logicData动态生成) 大致思路:...
  • 需求:在接口不改动的情况下由树形结构改成表格树结构,如下 调整后 1.这里使用的是antdesign框架,首先将a-tree改为a-table <!-- <a-tree checkable v-model="checkedKeys" :treeData="menuTree" @...
  • Bootstrap是目前很流行的一款前端框架,也有很多第三方基于Bootstrap开发了很多跟实用性的一些功能,比如BootStrap-bable-treegrid树形表格。树形表格在开发中应该是很常用到的。 引入样式文件 <link rel=...
  • c /c++ 树状数组 入门

    千次阅读 2018-04-03 18:46:24
    树状数组是十分的优雅的结构,用于解决区间求和,单点修改,树状数组线段树很相似 ,线段树的使用范围更广,树状数组虽然可用的范围比线段树小但是它的效率比线段树高   下面就是树状数组的基本图形,首先要...
  • 报表左表头按照层级分类,此时要求在第二增加一个行号,用来显示该行的编号,如上,增加行号可以使用润乾的row()函数,通过该函数能计算当前行的行号,再减去表头的固定行就能实现行号的展现,但此时发现一...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,012
精华内容 1,604
关键字:

如何用树状图和表格列出