轉帖|使用教程|編輯:鄭恭琳|2016-07-11 16:59:29.000|閱讀 4178 次
概述:本次教程主要講解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="//fc6vip.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@fc6vip.cn