Highchart屬性筆記

Highchart一些平時不常用到的屬性墨叛,偶爾想用時,查看API文檔不易找到伶跷,耗費時間蚓炬,本文只是為了讓自己能夠快速找到這些屬性而記錄的筆記尼斧。持續(xù)更新...

1.當圖表沒有數據時,圖表中會顯示相應的文字說明试吁。該功能需要額外的引入 http://cdn.hcharts.cn/highcharts/modules/no-data-to-display.js (require('highcharts/modules/no-data-to-display.js')(Highcharts))

  Highcharts.setOptions({
    lang: {
      noData: '暫無數據'
    }
  })
暫無數據

2.圖表未繪制前顯示loading棺棵。當數據需要從后臺獲取時,可以控制在圖形上暫時顯示Loading("Loading"文本可在lang對象中修改)

var chart = Highcharts.chart('container', option) // option為highchart自定義參數 
chart.showLoading() // 加載選項控制著圖表覆蓋區(qū)域載入畫面的顯示效果
chart.hideLoading() // 隱藏效果
loading.png

3.Highchart默認在圖表的右下角放置版權信息的標簽熄捍。若想取消版權信息顯示:

credits: {
  enabled: false
}
credits.jpg

4.使圖層半透明以避免遮擋后面的圖層(特別是圖表類型為area)

plotOptions: {
  series: { // 針對所有圖表有效的通用配置烛恤,若只針對area,series可改為area
    fillOpacity: 0.5 // 設置半透明
  }
}
圖層半透明以避免遮擋后面的圖層

5.Highstock中的dataGrouping余耽,表示是否將指定數量的數據合并展現為一個點

plotOptions: {
  series: { // 針對所有圖表有效的通用配置
    dataGrouping: { // 針對highstock,將指定數量的數據合并展現為一個點
      enabled: false
    }
}

同樣的數據缚柏,‘合并多個數據為一個點’ VS ‘每個點的數據都展示出來’


合并多個數據為一個點
每個點的數據都展示出來

6.Highstock初始化x軸的時間顯示區(qū)域

xAxis: {
  min: time - 30 * 60 * 1000, // time為某個時間的時間戳
  max: time
}
初始化控制x軸的時間顯示區(qū)域

7.給圖表里的線添加點擊click事件

series: {
  // ...
  events: {
    click () { // 除了click事件,還可添加mouseOut碟贾、mouseOver等事件
      // 點擊圖表后的回調函數
    }
  },
  data: [{
    events: {
      click () {
        // 點擊該數據區(qū)域后的回調函數
      }
    }
  }]
}

8.添加網格

xAxis: {
  gridLineWidth: 1
}币喧,
yAxis: {
  gridLineWidth: 1
}
gridLine.png

9.改變網格密集情況,即改變刻度顯示間距

yAxis: {
  gridLineWidth: 1,
  tickPixelInterval: 10 // 默認70
}
tickPixelInterval.png

10.給Y軸坐標的刻度添加單位

yAxis: {
  labels: {
    format: '{value}M'
  }
}
改變y軸刻度文案

11.改變鼠標移動上去時顯示的內容袱耽,例如給數據添加%

tooltip: {
  pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}%</b><br/>'
}
自定義顯示文案

12.改變圖例顯示的內容(如上圖)

legend: {
  labelFormatter: function () { // 顯示極值
    return '<span style="min-width: 65px;display:inline-block; text-align: right;">' + this.name + ':</span> ' + series[this.index].desc
  }
}

13.部分曲線默認隱藏: 設置series屬性下的visible

series: [{
  data: [……]
}, {
  data: [……]
}, {
  data: [……],
  visible: false
}]
highcharts部分曲線默認隱藏

14.js設置曲線顯示或隱藏(如上圖)

var chart = Highcharts.stockChart('container', {<!-- option -->})
chart.series[2].visible = this.isVisible
if (this.isVisible) {
  chart.series[2].show()
} else {
  chart.series[2].hide()
}

原文:
Highchart屬性筆記

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末杀餐,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子朱巨,更是在濱河造成了極大的恐慌史翘,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,627評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件冀续,死亡現場離奇詭異琼讽,居然都是意外死亡,警方通過查閱死者的電腦和手機洪唐,發(fā)現死者居然都...
    沈念sama閱讀 95,180評論 3 399
  • 文/潘曉璐 我一進店門钻蹬,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人凭需,你說我怎么就攤上這事问欠」鹆玻” “怎么了?”我有些...
    開封第一講書人閱讀 169,346評論 0 362
  • 文/不壞的土叔 我叫張陵溅潜,是天一觀的道長。 經常有香客問我薪伏,道長滚澜,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,097評論 1 300
  • 正文 為了忘掉前任嫁怀,我火速辦了婚禮设捐,結果婚禮上,老公的妹妹穿的比我還像新娘塘淑。我一直安慰自己萝招,他們只是感情好,可當我...
    茶點故事閱讀 69,100評論 6 398
  • 文/花漫 我一把揭開白布存捺。 她就那樣靜靜地躺著槐沼,像睡著了一般。 火紅的嫁衣襯著肌膚如雪捌治。 梳的紋絲不亂的頭發(fā)上岗钩,一...
    開封第一講書人閱讀 52,696評論 1 312
  • 那天,我揣著相機與錄音肖油,去河邊找鬼兼吓。 笑死,一個胖子當著我的面吹牛森枪,可吹牛的內容都是我干的视搏。 我是一名探鬼主播,決...
    沈念sama閱讀 41,165評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼县袱,長吁一口氣:“原來是場噩夢啊……” “哼浑娜!你這毒婦竟也來了?” 一聲冷哼從身側響起式散,我...
    開封第一講書人閱讀 40,108評論 0 277
  • 序言:老撾萬榮一對情侶失蹤棚愤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后杂数,有當地人在樹林里發(fā)現了一具尸體宛畦,經...
    沈念sama閱讀 46,646評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,709評論 3 342
  • 正文 我和宋清朗相戀三年揍移,在試婚紗的時候發(fā)現自己被綠了次和。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,861評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡那伐,死狀恐怖踏施,靈堂內的尸體忽然破棺而出石蔗,到底是詐尸還是另有隱情,我是刑警寧澤畅形,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布养距,位于F島的核電站,受9級特大地震影響日熬,放射性物質發(fā)生泄漏棍厌。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,196評論 3 336
  • 文/蒙蒙 一竖席、第九天 我趴在偏房一處隱蔽的房頂上張望耘纱。 院中可真熱鬧,春花似錦毕荐、人聲如沸束析。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,698評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽员寇。三九已至,卻和暖如春第美,著一層夾襖步出監(jiān)牢的瞬間丁恭,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,804評論 1 274
  • 我被黑心中介騙來泰國打工斋日, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留牲览,地道東北人。 一個月前我還...
    沈念sama閱讀 49,287評論 3 379
  • 正文 我出身青樓恶守,卻偏偏與公主長得像第献,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子兔港,可洞房花燭夜當晚...
    茶點故事閱讀 45,860評論 2 361