Highcharts是一款純JavaScript編寫的圖表庫，為你的Web網站、Web應用程序提供直觀、交互式圖表。當前支持折線、曲線、區域、區域曲線圖、柱形圖、條形圖、餅圖、散點圖、角度測量圖、區域排列圖、區域曲線排列圖、柱形排列圖、極坐標圖等幾十種圖表類型。

點擊下載Highcharts最新試用版

線寬

允許更改線的寬度。

更改線寬的代碼：

series: [{
    data: [216.4, 194.1, 95.6],
    lineWidth: 5}],

堆疊使系列可以彼此重疊放置。

游標

允許光標更改外觀以指示點和系列是可單擊的。

數據標簽

允許在圖表上為一系列數據的每個點顯示數據標簽。

顯示如何啟用數據標簽的代碼示例：

plotOptions: {
    line: {
        dataLabels: {
            enabled: true
        }
    }
},

注意：您可能希望禁用鼠標跟蹤功能，該功能會突出顯示系列并將鼠標懸停在鼠標懸停上（如果禁用了鼠標跟蹤功能，則不會顯示工具提示）。

數據標簽上顯示的文本也可以通過使用formatter選項進行自定義。

短劃線樣式

允許使用虛線代替實線，有幾種不同的破折號選項可用。

series: [{
    data: [1, 3, 2, 4, 5, 4, 6, 2, 3, 5, 6],
    dashStyle: 'longdash'
}]

區域

在某些情況下，您可能希望將圖形的某些部分顯示為不同的部分，一個常見的示例是當數據落入特定范圍時使用不同的顏色。使用可以達到此效果zones。默認情況下，分區是在yAxis上完成的，但是可以通過zoneAxis在系列上設置變量來輕松更改。對于分區本身，您必須定義一個名為的數組zones，其中每個條目均對應于一個區域，該區域由parameter分隔，該參數value是該區域所到達的點。每個區域可以覆蓋的設置是color，fillColor和dashStyle。

用于分區的代碼：

zones: [{  
    value: 0,  
    color: '#f7a35c'  
}, {  
    value: 10,  
    color: '#7cb5ec'  
}, {  
    color: '#90ed7d'  
}]