反馈已提交

网络繁忙

图表自定义标题/标签/提示

  • 文档创建者:Leo.Tsai
  • 历史版本:22
  • 最近更新:Alicehyy 于 2022-06-09
  •  1. 概述

    1.1 应用场景

    设计图表时,图表标题、标签、提示等均可以使用代码进行自定义,可以使用 JS 自定义其显示内容,或者使用 HTML 代码自定义内容样式等。

    例如:图表标题直接输入 HTML 代码 <font color='#00AEFF'>▍</font> 产品销量 ,再选中「使用html解析文本内容」。

    注:代码中的 ▍是来自于搜狗输入法中的特殊符号 。

    预览效果如下图所示:

    Snag_30171266.png

    1.2 功能简介

    1)图表中的标题、标签、坐标轴轴标签、数据点提示均支持使用自定义代码设置。

    2)图表标题不支持使用 JS 代码;输入 HTML 代码时,不能使用公式,直接在文本框编辑即可。

    3)使用 HTML 代码需选中「使用html解析文本内容」。

    4)使用 HTML 代码后,图表导出时限制如下:

    • 仅支持标签:<b>、<strong>、<i>、<em>、<br/>、<span>

    • 仅对<span>支持内联样式

    • 仅支持内联样式:font-size、font-family、font-style、font-weight、colorfont-weight设置加粗时,仅支持bold,不支持bolder

    • 导出的 HTML 文本仅支持水平显示,不支持旋转

    • 不支持标签的嵌套格式,例如:<span>父节点<span>子节点</span></span>

    2. 示例索引

    文档链接
    应用场景效果图

    自定义标签为图片

    自定义提示为图片

    图表标签/提示自定义 HTML 代码实现将图片作为标签,跟随图形显示1636094219810701.png
    自定义标签求占比图表标签自定义 JS 代码,在代码中进行计算,并引用公式改变数值格式,实现单个系列多个分类的图表正确显示各分类的占比1636342015518343.png

    自定义标签为系列和

    自定义提示显示系列和

    图表标签/提示自定义 JS 代码,实现堆积柱形图显示系列汇总值1636356312290099.png
    自定义标签显示为系列色饼图标签自定义 HTML 代码,实现标签跟随系列色显示1641265102137774.png
    自定义提示点样式图表提示自定义 HTML 代码,实现不一样的提示点样式1636449562559842.png
    提示点获取数据集数据图表提示自定义 JS+HTML 代码,实现提示点获取数据集数据,并实现增减三角标效果1636613987130063.gif
    提示点获取单元格数据图表提示自定义 JS 代码,实现获取单元格数据进行展示1638515247232874.png
    数据点提示显示所有系列图表提示自定义 JS+HTML 代码,实现显示所有系列且每个系列单位不同
    1638356090960521.png
    分类坐标轴显示数值指标图表坐标轴自定义 JS 代码,实现分类轴显示数值指标1611541216807989.png

    3. 常用 HTML 写法

    此处给出一些 HTML 文本解析的常用写法,方便用户参考。

    分类示例
    单个标签的单行显示效果<span style="color:blue;">新建图表标题</span>
    <b>新建图表标题</b>
    <i>新建图表标题</i>
    <span style="font-size:16px; font-family:Verdana; font-style:italic; font-weight:bold; color: #00f;">新建图表标题</span>
    单个标签的换行显示效果<span style="color:blue;">新建<br>图表标题</span>
    <span style="color:blue;">新建<br>图表<br>标题</span>
    <em>新建图<br>表标题</em>
    多个标签单行显示<b>新建</b><i>图表</i>
    <b>新建</b><i>图表</i><em>标题</em>
    <span style="color:blue;">新建</span><i>图表</i><em>标题</em>
    多个标签换行显示<b>新建<br>图表</b><br>
    <b>新建<br>图表</b><br><em>标题</em>
    <b>新建</b><i>图表</i><br><em>标题</em>

    附件列表


    主题: 图表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持