如何用图表控件实现点击图例图标隐藏图表序列
為了提高開發(fā)效率,第三方商用圖表控件越來越被程序員廣泛使用,由于第三方商用控件產品的可重用性,可以幫助企業(yè)節(jié)約GUI工程師的壓力而實現(xiàn)靈活,絢麗的圖表。
在閱讀以下文章之前先下載安裝試用版:
FusionCharts XT試用版下載:http://www.componentcn.com/kongjianchanpin/tubiao/jibentubiaokongjian/2014-10-30/475.html
在圖表應用中,經常一個圖表繪制區(qū)域內會有多個圖表序列,客戶為了更清晰直觀地觀察某一圖表的變化和數(shù)據(jù),需要對其他其他圖表進行隱藏,FusionCharts XT為客戶提供了該功能,當客戶點擊圖例中某一圖表的圖標時,會隱藏該圖表,再次點擊時該圖表又會出現(xiàn),具體可以參考下面的部分代碼:
?
{
??? "chart": {
??????? "caption": "Comparison of Quarterly Revenue",
??????? "subCaption": "Last year Vs This year",
??????? "xAxisname": "Quarter",
??????? "yAxisName": "Revenue (In USD)",
??????? "numberPrefix": "$",
??????? "theme": "fint",
??????? "legendBgColor": "#CCCCCC",
??????? "legendBgAlpha": "20",
??????? "legendBorderColor": "#666666",
??????? "legendBorderThickness": "1",
??????? "legendBorderAlpha": "40",
??????? "legendShadow": "1"
??? },
??? "categories": [
??????? {
??????????? "category": [
??????????????? {
??????????????????? "label": "Q1"
??????????????? },
??????????????? {
??????????????????? "label": "Q2"
??????????????? },
??????????????? {
??????????????????? "label": "Q3"
??????????????? },
??????????????? {
??????????????????? "label": "Q4"
??????????????? }
??????????? ]
??????? }
??? ],
??? "dataset": [
??????? {
??????????? "seriesname": "Last Year",
??????????? "initiallyHidden": "1",//初始化時就可以隱藏該圖表
??????????? "data": [
??????????????? {
??????????????????? "value": "10000"
??????????????? },
??????????????? {
??????????????????? "value": "11500"
??????????????? },
??????????????? {
??????????????????? "value": "12500"
??????????????? },
??????????????? {
??????????????????? "value": "15000"
??????????????? }
??????????? ]
??????? },
??????? {
??????????? "seriesname": "This Year",
??????????? "data": [
??????????????? {
??????????????????? "value": "25400"
??????????????? },
??????????????? {
??????????????????? "value": "29800"
??????????????? },
??????????????? {
??????????????????? "value": "21800"
??????????????? },
??????????????? {
??????????????????? "value": "26800"
??????????????? }
??????????? ]
??????? }
??? ]
轉載于:https://www.cnblogs.com/kjyj/p/4772704.html
總結
以上是生活随笔為你收集整理的如何用图表控件实现点击图例图标隐藏图表序列的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Javascript高级程序设计——基本
- 下一篇: 更改Firefox为中文界面(Ubunt