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

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

點擊下載Highcharts最新試用版

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

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

刻度線

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

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

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

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

 在對數(shù)軸上，tickInterval基于冪，因此tickInterval為1表示對0.1、1、10、100等各一個刻度。tickInterval為2表示對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è)置刻度線的近似像素間隔。它不適用于分類軸。y軸默認(rèn)為72，x軸默認(rèn)為100。

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

標(biāo)簽

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

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

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

網(wǎng)格線

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

要為x軸或y軸啟用或禁用網(wǎng)格線，請設(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)格線的其他選項可以在x和y軸的API參考中找到。

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

多軸

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

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]
}]

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

軸標(biāo)題 

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

軸類型

軸可以是線性，對數(shù)，日期時間或類別。軸類型設(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)的軸類型。如果數(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]
        }]
    }});

對數(shù)

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

請注意，在對數(shù)軸上，tickInterval選項基于冪，因此tickInterval為1表示對0.1、1、10、100等的一個刻度。tickInterval為2意味著對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等上打勾。

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

日期時間

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

一些有用的功能是：

// 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);

請注意，基于Unix的服務(wù)器時間戳表示為秒而不是毫秒。知道這一點很有用，因為PHP時間是基于Unix時間戳的，因此將其與Highcharts一起使用時，該值僅需乘以1000。

在Highstock中，x軸始終是日期時間軸。

分類

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

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

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

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

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

動態(tài)更新軸

渲染時間過后，可以使用新信息更新軸。

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

想要了解或購買Highcharts正版授權(quán)的朋友，歡迎