提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
转帖|使用教程|编辑:郑恭琳|2016-07-11 16:59:29.000|阅读 4130 次
概述:本次教程主要讲解Highcharts图表标题(Title)设置。
# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>
相关链接:
标题默认显示在图表的顶部,包括标题和副标题(subTitle),其中副标题是非必须的。设置标题和副标题的示例代码如下:
title: { text: '我是标题' }, subtitle: { text: '我是副标题' }
一、标题的常用属性
标题只有一些文字信息,所以标题的配置无非是一些定位、字体大小、颜色等的配置,常见属性如下表所示:
属性名 | 描述 | 默认值 |
---|---|---|
text | 标题的文字 | "Chart title" |
align | 文字水平对齐方式,有left、center、right可选 | "center" |
verticalAlign | 文字垂直对齐方式,有top、middle、bottom可选 | "" |
useHTML | 是否解析html标签,设置解析后,可以使用例如a等html标签 | false |
floating | 是否浮动,设置浮动后,标题将不占用图表区位置 | false |
margin | 标题和图表区的间隔,当有副标题时,表示标题和副标题之间的间隔 | 15 |
style | 文字样式,可以设置文字颜色、字体、字号,注意和css有略微的不同,例如font-size用fontSize、font-family用fontFamily表示 | { color: '#3E576F', fontSize: '16px' } |
x | 相对于水平对齐的偏移量,可以是负数,单位是px | 0 |
y | 相对于垂直对齐的偏移量,可以使负数,单位是px | 0 |
二、动态设置和获取标题
1、获取标题内容
可以通过Highcharts对象获取标题内容,实例代码如下:
var chart = new Highcharts.Chart(options); // Highcharts构造函数 var title = chart.title.textStr; // 通过chart对象获取标题内容
2、动态设置标题
Highcharts提供了setTitle()函数供动态设置标题用,setTitle()函数结构如下
setTitle (Object title, object subtitle, Boolean redraw)
参数说明:
实例说明:
var title = { text:"我是新标题", style:{ color:"#ff0000" } }; var chart = new Highcharts.Chart(); chart.setTitle(title);
上述方法不仅仅是设置标题的文字,有的时候我们可能只需要更改标题的样式,例如颜色、字号的,也可以通过该函数实现,示例代码如下:
var subtitle = { style:{ color:"#000", fontWeight:"bold" } }; var chart = new Highcharts.Chart(); chart.setTitle(null,subtitle); //设置副标题,第一个参数设置为null
三、关于标题的常见问题
1、如何在标题中添加链接
实现方法:
设置useHTML为true,然后在标题文字中加入a标签
实例:
title :{ useHTML:true, text:"Highcharts中文网 | <a href='//www.hcharts.cn' target='_blank'>中文教程</a>" }
2、如何隐藏(不显示)标题
实现方法: 设置标题文字为空即可
实例:
title :{ text:null }
<p><span style="font-family:microsoft yahei; font-size:16px">Via:hcharts.cn</span></p>
<p><strong><a href="//pclwef.cn/product/3328/download" style="box-sizing: border-box; color: rgb(66, 139, 202); text-decoration: none; outline: 0px; background: transparent;">点击下载最新版 Highcharts</a></strong></p>
<p><strong>如果你想提供任何产品反馈,<a href="//chat8.live800.com/live800/chatClient/chatbox.jsp?companyID=60357&configID=149250&jid=1316272045" style="box-sizing: border-box; color: rgb(66, 139, 202); text-decoration: none; outline: 0px; background: transparent;" target="_blank">请与我们联系</a>。</strong></p>
<p><span style="color:rgb(255, 0, 0)"><strong>购买最新版Highcharts<<a href="//chat8.live800.com/live800/chatClient/chatbox.jsp?companyID=60357&configID=149250&jid=1316272045" style="box-sizing: border-box; color: rgb(66, 139, 202); text-decoration: none; outline: 0px; background: transparent;" target="_blank">咨询在线客服</a>>,即可拥有最新正版授权!</strong></span></p>
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn
本文探讨 SQL Server 中 NULL 和空值之间的区别,并讨论如何有效地处理它们。
Unity 是一款功能极其丰富的游戏引擎,允许开发人员将各种媒体集成到他们的项目中。但是,它缺少最令人兴奋的功能之一 - 将 Web 内容(例如 HTML、CSS 和 JavaScript)直接渲染到 3D 场景中的纹理上的能力。在本文中,我们将介绍如何使用 DotNetBrowser 在 Unity3D 中将 Web 内容渲染为纹理。
DevExpress v24.2帮助文档正式发布上线了,请按版本按需下载~
本教程将向您展示如何用MyEclipse构建一个Web项目,欢迎下载最新版IDE体验!
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@pclwef.cn
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢