Highcharts是一款純JavaScript編寫(xiě)的圖表庫(kù)，為你的Web網(wǎng)站、Web應(yīng)用程序提供直觀、交互式圖表。當(dāng)前支持折線、曲線、區(qū)域、區(qū)域曲線圖、柱形圖、條形圖、餅圖、散點(diǎn)圖、角度測(cè)量圖、區(qū)域排列圖、區(qū)域曲線排列圖、柱形排列圖、極坐標(biāo)圖等幾十種圖表類(lèi)型。

Highcharts最新版本v8.0.0發(fā)布，添加了帶有動(dòng)畫(huà)的數(shù)據(jù)排序等新功能，并修復(fù)了一些BUG。戳此處查看詳情！

點(diǎn)擊下載Highcharts最新試用版

軸標(biāo)簽，刻度線和網(wǎng)格線

軸標(biāo)簽，刻度線和網(wǎng)格線緊密相連，并且一起縮放。計(jì)算其位置以最適合圖表中顯示的數(shù)據(jù)。 

刻度線

刻度線是沿軸放置的線，以顯示測(cè)量單位。刻度線之間的間隔主要由tickInterval和tickPixelInterval選項(xiàng)決定。標(biāo)簽和網(wǎng)格線的位置與刻度線相同。 

tickInterval選項(xiàng)確定刻度標(biāo)記的間隔（以軸為單位）。刻度間隔默認(rèn)為null，這意味著它被計(jì)算為近似跟隨線性和日期時(shí)間軸上的tickPixelInterval。

在分類(lèi)軸上，null tickInterval將默認(rèn)為1，即一個(gè)類(lèi)別。

請(qǐng)注意，日期時(shí)間軸以毫秒為單位，因此，例如，一天的間隔表示為24 3600 1000。 

在對(duì)數(shù)軸上，tickInterval基于冪，因此tickInterval為1表示對(duì)0.1、1、10、100等各一個(gè)刻度。tickInterval為2表示對(duì)0.1、10、1000等為刻度。tickInterval為0.2在0.1、0.2、0.4、0.6、0.8、1、2、4、6、8、10、20、40等上打勾

“ tickPixelInterval”基于像素值（如果“ tickInterval”為空）設(shè)置刻度線的近似像素間隔。它不適用于分類(lèi)軸。y軸默認(rèn)為72，x軸默認(rèn)為100。

如果設(shè)置了minorTickInterval選項(xiàng)，則在主要刻度之間布置次要刻度。這包括較小的刻度線和較小的網(wǎng)格線，它們?cè)谕庥^上都有自己的選擇，但不包括標(biāo)簽。 

標(biāo)簽

可以在顯示其對(duì)應(yīng)數(shù)據(jù)值的軸上找到軸標(biāo)簽。也可以使用格式化程序功能來(lái)定制標(biāo)簽：

yAxis: {
    labels: {
        formatter: function() {
            return this.value + ' %';
        }
    },
},

上面的示例采用y軸標(biāo)簽的值，并在其末尾添加％符號(hào)。

網(wǎng)格線

網(wǎng)格線是水平（和/或垂直）線的集合，這些水平線將圖表劃分為網(wǎng)格，從而更易于讀取圖表的值。 

要為x軸或y軸啟用或禁用網(wǎng)格線，請(qǐng)?jiān)O(shè)置相應(yīng)軸的gridLineWidth：

xAxis ：{ 
    gridLineWidth ：1 
} ，
yAxis ：{ 
    gridLineWidth ：1 
}

y軸的網(wǎng)格線默認(rèn)為啟用（gridLineWidth：1），而x軸的網(wǎng)格線（gridLineWidth：0）默認(rèn)為禁用。

網(wǎng)格線的其他選項(xiàng)可以在x和y軸的API參考中找到。

細(xì)網(wǎng)格線是可以通過(guò)設(shè)置minorTickInterval選項(xiàng)啟用的中間線。

多軸

可以有多個(gè)軸并將它們與不同的數(shù)據(jù)系列鏈接。為此，需要?jiǎng)?chuàng)建多個(gè)軸，如下所示：

yAxis: [{ //--- Primary yAxis
    title: {
        text: 'Temperature'
    }
}, { //--- Secondary yAxis
    title: {
        text: 'Rainfall'
    },
    opposite: true
}],
series: [{
    yAxis: 0,
    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
},{
    yAxis: 1,
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]

請(qǐng)注意，使用列表創(chuàng)建了多個(gè)軸，因此第一個(gè)yAxis以索引0開(kāi)頭。“ opposite：true”選項(xiàng)將軸置于圖表的右側(cè)。

軸標(biāo)題 

軸標(biāo)題，顯示在軸線旁邊。默認(rèn)情況下，此標(biāo)題為y軸，默認(rèn)情況下為x軸隱藏。

軸類(lèi)型

軸可以是線性，對(duì)數(shù)，日期時(shí)間或類(lèi)別。軸類(lèi)型設(shè)置如下：

// The types are 'linear', 'logarithmic' and 'datetime'
yAxis: {
    type: 'linear',
}
// Categories are set by using an array
xAxis: {
    categories: ['Apples', 'Bananas', 'Oranges']
}

沿軸的數(shù)字是線性比例。這是默認(rèn)的軸類(lèi)型。如果數(shù)據(jù)系列中僅存在y值，則將x軸標(biāo)記為從0到y(tǒng)值的數(shù)量（顯示y值的數(shù)組索引）：

var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            title: {
                text: 'Fruit Number'
            },
            tickInterval: 1
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            },
            tickInterval: 1
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    }});

對(duì)數(shù)

在對(duì)數(shù)軸上，沿軸的數(shù)字對(duì)數(shù)增加，并且軸根據(jù)圖表中顯示的數(shù)據(jù)系列進(jìn)行自我調(diào)整。

請(qǐng)注意，在對(duì)數(shù)軸上，tickInterval選項(xiàng)基于冪，因此tickInterval為1表示對(duì)0.1、1、10、100等的一個(gè)刻度。tickInterval為2意味著對(duì)0.1、10、1000等的刻度。 tickInterval為0.2會(huì)在0.1、0.2、0.4、0.6、0.8、1、2、4、6、8、10、20、40等上打勾。

要注意的另一件事是，對(duì)數(shù)軸永遠(yuǎn)不會(huì)變?yōu)樨?fù)數(shù)，因?yàn)槊總€(gè)完整軸單位都是前一個(gè)的十分之一。結(jié)果，Highcharts將刪除與軸關(guān)聯(lián)的0或負(fù)點(diǎn)，并且如果您嘗試將axis.min  選項(xiàng)設(shè)置為0或負(fù)，它將失敗并顯示錯(cuò)誤。

日期時(shí)間

日期時(shí)間軸以適當(dāng)?shù)臅r(shí)間間隔打印日期日期值的標(biāo)簽。在內(nèi)部，datetime軸是線性數(shù)字軸，以自1970年1月1日午夜以來(lái)的毫秒數(shù)為基礎(chǔ)，由JavaScript Date對(duì)象指定。根據(jù)比例，日期時(shí)間標(biāo)簽將表示為時(shí)間或日期。

一些有用的功能是：

// Get time in millis for UTC
Date.UTC(year,month,day,hours,minutes,seconds,millisec)
// Get time in millis for your local time
Date.parse("Month day, year");
// Built in Highcharts date formatter based on the [PHP strftime](//php.net/manual/en/function.strftime.php) (see [API reference](//api.highcharts.com/class-reference/Highcharts#.dateFormat) for usage)
Highcharts.dateFormat("Month: %m Day: %d Year: %Y", 20, false);

請(qǐng)注意，基于Unix的服務(wù)器時(shí)間戳表示為秒而不是毫秒。知道這一點(diǎn)很有用，因?yàn)镻HP時(shí)間是基于Unix時(shí)間戳的，因此將其與Highcharts一起使用時(shí)，該值僅需乘以1000。

在Highstock中，x軸始終是日期時(shí)間軸。

分類(lèi)

如果存在類(lèi)別，則使用類(lèi)別的名稱(chēng)代替軸上的數(shù)字或日期。請(qǐng)參閱xAxis.categories。

我應(yīng)該使用哪種軸類(lèi)型？

Highcharts演示中的許多示例   都帶有帶有類(lèi)別的xAxis。但是，重要的是要了解何時(shí)使用類(lèi)別以及何時(shí)使用線性或日期時(shí)間xAxis更好。

類(lèi)別是一組項(xiàng)目，例如“ Apples”，“ Pears”和“ Oranges”或“ Red”，“ Green”，“ Blue”，“ Yellow”。這些類(lèi)別的共同點(diǎn)是沒(méi)有中間值。蘋(píng)果和梨之間沒(méi)有滑動(dòng)過(guò)渡。同樣，如果您將一個(gè)類(lèi)別排除在外，則用戶將無(wú)法理解遺漏的內(nèi)容。假設(shè)您每隔第二次打印“紅色”，“綠色”，“藍(lán)色”或“黃色”顏色，則用戶將不知道缺少什么顏色。因此，Highcharts沒(méi)有自動(dòng)的方法來(lái)隱藏類(lèi)別（如果它們?cè)谳S上變得密集）。如果軸標(biāo)簽重疊有問(wèn)題，請(qǐng)嘗試使用xAxis.labels.staggerLines選項(xiàng)，或旋轉(zhuǎn)標(biāo)簽。 選項(xiàng)，最好是使用線性或日期時(shí)間軸。

線性或日期時(shí)間類(lèi)型的xAxis的優(yōu)點(diǎn)是Highcharts能夠確定數(shù)據(jù)標(biāo)簽的距離，因?yàn)樗廊绾芜M(jìn)行插值。默認(rèn)情況下，標(biāo)簽之間的距離大約為100px，可以在tickPixelInterval選項(xiàng)中進(jìn)行更改。如果您具有可預(yù)測(cè)的類(lèi)別，例如“ Item1”，“ Item2”，“ Item3”或“ 2012-01-01”，“ 2012-01-02”，“ 2012-01-03”等，則組合線性或日期時(shí)間軸類(lèi)型使用xAxis.labels.formatter可能是更好的選擇。

動(dòng)態(tài)更新軸

渲染時(shí)間過(guò)后，可以使用新信息更新軸。

溫馨提示：疫情期間返崗上班需戴口罩、勤洗手、常通風(fēng)，做好防護(hù)措施！

想要了解或購(gòu)買(mǎi)Highcharts正版授權(quán)的朋友，歡迎