報表開發工具中開放的部分圖表js接口列表

1.. 描述

報表開發工具FineReport 8.0版本中開放了部分圖表js接口，在具體應用的過程當中不少人都不知道這些接口到底有什麼做用，該怎麼應用，因此根據我本身的應用在下面概括了這些新開放js接口能夠實現的功能和具體調用方法。

2. 接口屬性

2.1 獲取chart對象

FR.Chart.WebUtils.getChart("Cells__id")	單元格
FR.Chart.WebUtils.getChart("Float__id")	懸浮元素
FR.Chart.WebUtils.getChart("id")	表單

2.2 chart數據設置

chart.dataRefresh()	從新從數據集取數，並刷新圖表（刷新效果與動態刷新一致）
chart. setTitleVisible(boolean )	標題是否可見,參數爲true可見，false不可見
chart.setTitleContent()	標題的值設置，能夠爲參數或者值
chart.setLegendVisible(boolean)	圖例是否可見 , 參數爲true可見，false不可見
chart.setSeriesInvisible([index])	設置哪些系列隱藏，數值數組格式，如：chart.setSeriesInvisible([0,1,3])則系列1，2，4隱藏；隱藏的系列圖例也一樣灰化
chart.setLabelVisible(boolean)	標籤 是否可見, 參數爲true可見，false不可見
chart.setLabelValue(分類名, 系列名, 標籤的字符串值)	置對應的標籤顯示值（柱形圖，面積圖，折線圖，條形圖，圓環圖，雷達圖，組合圖,全距圖）
chart.setLableValue(系列名, 標籤的字符串值)	（餅圖）
chart.setLableValue(系列名，x，y，標籤的字符串值 )	（散點圖,氣泡圖）
chart.setLableValue(區域名，標籤的字符串值 )	(地圖)
chart.setLableValue(地址/經緯度，標籤的字符串值 )	（gis地圖，是地址仍是經緯度按照模板設置） 股價圖，儀表盤和甘特圖不支持標籤設置
chart.addAlertLine(name, value, color, align, isUseSecondValueAxis)	設置警惕線內容，值，顏色以及居左仍是居右/上仍是
chart.clearAlertLine()	清除全部警惕線
chart.setAnimationEnable(boolean)	設置圖表是否開啓動畫，true爲開啓，false關閉
chart.setDraggable(boolean)	設置圖表是否開啓拖拽功能，true爲開啓，false關閉
chart.setZoom(boolean)	設置圖表是否開啓縮放，true爲開啓,false關閉
chart.setTooltipEnable(boolean)	設置是否開啓數據點提示，true爲開啓，false關閉
chart.setTooltipValue( 分類名，系列名， html )	設置對應的分類和系列的數據點提示內容（柱形圖，面積圖，折線圖，條形圖，圓環圖，雷達圖，組合圖 ,全距圖）
chart.setTooltipValue(系列名, html)	（餅圖）
chart.setTooltipValue(系列名，x，y，html)	（散點圖,氣泡圖）
chart.setTooltipValue(index，區域名，html)	(地圖，index爲層級，最上層爲0依次往下)
chart.setTooltipValue(地址/經緯度，html)	（gis地圖，是地址仍是經緯度按照模板設置）
chart.setTooltipValue(date，html)	(股價圖)
chart.triggerTooltip(分類名，系列名)	觸發對應的數據點提示 （柱形圖，面積圖，折線圖，條形圖，圓環圖，雷達圖，組合圖 ,全距圖）
chart. triggerTooltip(系列名)	（餅圖）
chart.triggerTooltip(系列名，x，y)	（散點圖,氣泡圖）
chart.triggerTooltip(index，區域名)	(地圖)
chart.triggerTooltip(地址/經緯度)	（gis地圖，是地址仍是經緯度按照模板設置）
chart. triggerTooltip（date）	(股價圖)
chart.setAxisTooltipEnable(boolean)	置圖表是否開啓座標點提示，true爲開啓，false關閉
chart.setAutoRefresh(time)	設置圖表自動刷新的時間
chart.refresh()	圖表刷新,單位 秒
chart.sort(boolean)	使圖表顯示按照分類總值排序（柱形圖包括堆積型的，條形圖包括堆積型的，面積圖包括堆積型的，折線圖）；true表示從小到大，false表示從大到小
chart.getGis()	獲取百度地圖map對象

注：股價圖，儀表盤和甘特圖不支持標籤設置，甘特圖和儀表盤沒有數據點提示。

3. 示例

3.1 準備數據

新建工做薄，添加數據集，SQL語句爲SELECT * FROM [銷量] where 地區 ='華東'。

3.2 插入折線圖

以懸浮圖表爲例，點擊插入>懸浮元素>插入圖表，彈出圖表嚮導對話框，選擇折線圖以下圖：

點擊肯定

3.3 設置圖表數據

圖表數據源來自於數據集數據集，點擊圖表屬性表-數據設置以下：

並查看圖表的名稱爲Float2，具體查看方法可參考懸浮元素

3.4 添加按鈕控件並設置js事件

在H1單元格，添加按鈕控件，並設置按鈕的名稱爲改變標記點的值，以下圖

點擊事件編輯，爲按鈕控件添加js事件，具體的JS代碼以下：

1. chart=FR.Chart.WebUtils.getChart("Float2");//獲取chart對象  

2. chart.setTooltipValue("孫林","牛肉乾","1111");//修改孫林，牛肉乾的標記點提示爲修改後的內容1111;  

注：這裏改變的是孫林、牛肉乾對應的標記點的值

填報預覽，點擊按鈕控件，效果以下

3.5 保存與預覽

保存模板，點擊填報預覽，效果即如上。