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

Highcharts現(xiàn)已更新至最新版本7.2.0，新版本添加了新的頂級(jí)選項(xiàng)-說(shuō)明；幾乎所有系列都增加了對(duì)多個(gè)色軸的支持；增加了高對(duì)比度光和高對(duì)比度 - 黑暗主題，與背景形成3：1對(duì)比度，并修復(fù)了一些之前存在的BUG，趕快下載試用吧~

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

常見(jiàn)問(wèn)題

• Highcharts是否引用我們域外的文件？

• 我的圖表未顯示在Internet Explorer 7或8中

• 我可以將Highcharts與...服務(wù)器一起使用嗎？

• 我可以在Highcharts中使用Highstock中的功能嗎？

• 我可以向?qū)С龅膱D表添加數(shù)據(jù)表嗎？

• 如何從Highcharts中獲得最佳性能？

• 我可以將多個(gè)圖表導(dǎo)出到同一圖像或PDF嗎？

• 我的非英文字符未正確顯示在圖表中

• 我可以在不使用瀏覽器的情況下在服務(wù)器上生成圖表嗎？

• 如何定義不規(guī)則時(shí)間數(shù)據(jù)？

• 如何從MySQL數(shù)據(jù)庫(kù)添加數(shù)據(jù)？

• 您在我的國(guó)家/地區(qū)的地圖不包含有爭(zhēng)議的區(qū)域

是否Highcharts參考我們的域之外的文件嗎？

對(duì)于基本用法，Highcharts除了highcharts.js / highstock.js以外，不引用任何其他文件，盡管您需要注意某些情況。

• 導(dǎo)出模塊。由于并非所有瀏覽器都可以將圖表轉(zhuǎn)換為圖像格式，因此默認(rèn)情況下，此操作是在我們的Web服務(wù)//export.highcharts.com上完成的。生成的SVG從瀏覽器發(fā)送到導(dǎo)出服務(wù)器，然后將圖像發(fā)送回。如果您擔(dān)心數(shù)據(jù)內(nèi)容通過(guò)Internet傳輸，則應(yīng)考慮我們的替代解決方案。最簡(jiǎn)單的選擇是使用我們的  模塊進(jìn)行客戶(hù)端導(dǎo)出。查看功能和兼容性表是否符合您的要求。如果您有權(quán)訪(fǎng)問(wèn)節(jié)點(diǎn)服務(wù)器，則還可以設(shè)置自己的導(dǎo)出服務(wù)器。 

• 某些功能（包括客戶(hù)端導(dǎo)出）可能需要第三方依賴(lài)性。其中一些是根據(jù)需要從我們的服務(wù)器加載的，但是在這些情況下，加載位置是可配置的。有關(guān)所有外部依賴(lài)項(xiàng)的詳細(xì)信息，包括許可和安全性詳細(xì)信息，可以在可選的依賴(lài)項(xiàng)文檔文章中找到。

我的圖表未顯示在Internet Explorer 7或8中

圖表在現(xiàn)代瀏覽器中有效但在IE6、7和8中失敗的最常見(jiàn)原因是配置選項(xiàng)中的逗號(hào)逗號(hào)。流浪逗號(hào)是JavaScript中對(duì)象或數(shù)組的最后一項(xiàng)之后的逗號(hào)。這些將在現(xiàn)代瀏覽器中靜默傳遞，但會(huì)在舊版IE中導(dǎo)致JavaScript錯(cuò)誤。

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    xAxis: {
        type: 'datetime'
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5,  
                216.4, 194.1, 95.6, 54.4],
        pointStart: Date.UTC(2012, 0, 1),
        pointInterval: 24 * 3600 * 1000,
    }]
});

舊版IE無(wú)法顯示圖表的另一種情況是禁用了安全設(shè)置“ ActiveX控件和插件” =>“二進(jìn)制和腳本行為”。這種情況很少在用戶(hù)計(jì)算機(jī)上發(fā)生，但是我們時(shí)常在公司網(wǎng)絡(luò)上看到這種情況。在這種情況下，IE無(wú)法繪制任何矢量圖形，僅顯示文本。 

我可以將Highcharts與...服務(wù)器一起使用嗎？

Highcharts完全在客戶(hù)端上運(yùn)行，并且可以與任何可交付HTML和JavaScript內(nèi)容的Web服務(wù)器一起使用。無(wú)論您的服務(wù)器是PHP，Perl，ASP，ASP.NET，Node.js還是其他任何產(chǎn)品，Highcharts都完全不知道它。HTML / JavaScript文件也可以從文件系統(tǒng)加載，在應(yīng)用程序平臺(tái)中就是這種情況，其中Highcharts加載到應(yīng)用程序內(nèi)的Web組件中。

集成Highcharts的最佳做法可能因系統(tǒng)而異。您應(yīng)該遵循在特定系統(tǒng)上處理JavaScript的常規(guī)做法。有些人喜歡通過(guò)Highcharts設(shè)置提供干凈的JSON或JavaScript文件，其他人則希望將JavaScript設(shè)置直接寫(xiě)入網(wǎng)頁(yè)。數(shù)據(jù)可以JSON或CSV文件的形式加載（請(qǐng)參閱左側(cè)菜單中的處理數(shù)據(jù)），或在圖表設(shè)置中以?xún)?nèi)聯(lián)方式打印。在使用數(shù)據(jù)庫(kù)供電的后端時(shí)，讓您的服務(wù)器系統(tǒng)提供JSON或CSV文件可能更干凈。

對(duì)于與服務(wù)器的實(shí)時(shí)連接，您可以設(shè)置網(wǎng)頁(yè)以通過(guò)XHR加載新數(shù)據(jù)，或使用WebSockets設(shè)置直接通信。在瀏覽器中的新數(shù)據(jù)到達(dá)，圖表可以保持通過(guò)各種動(dòng)態(tài)終結(jié)點(diǎn)像更新Series.addPoint()，Point.update()，Chart.addSeries()，Chart.update()等。

在開(kāi)始設(shè)置復(fù)雜的后端之前，您可能需要查看www.highcharts.com/download，是否有人為您的特定系統(tǒng)創(chuàng)建了包裝。

我可以在Highcharts中使用Highstock中的功能嗎？

是的，大多數(shù)Highstock功能都可以應(yīng)用于標(biāo)準(zhǔn)圖表。從許可的角度來(lái)看，使用Stock軟件包的功能顯然需要Highstock許可。

從技術(shù)上講，Highcharts Stock是作為Highcharts的一組插件實(shí)現(xiàn)的。股票包中包含Highcharts的整個(gè)代碼庫(kù)，您可以使用Highcharts.Chart并調(diào)用通常與股票圖相關(guān)聯(lián)的某些功能來(lái)調(diào)用圖表。

我可以在導(dǎo)出的圖表中添加數(shù)據(jù)表嗎？

如果您不關(guān)心導(dǎo)出，則只需通過(guò)export-data模塊和一個(gè)簡(jiǎn)單的選項(xiàng)exporting.showTable添加數(shù)據(jù)表。但是，此表不支持導(dǎo)出為SVG或其他圖像格式，但是可以在Highcharts數(shù)據(jù)和繪圖API上進(jìn)行一些編程，即可繪制一個(gè)表。請(qǐng)參閱我們的jsFiddle演示以獲取源代碼和實(shí)時(shí)示例。

如何從Highcharts中獲得最佳性能？

在處理具有大量數(shù)據(jù)點(diǎn)的序列時(shí)，需要考慮一些事項(xiàng)。

1. 首先，考慮使用Boost模塊。

2. 否則，對(duì)于折線(xiàn)圖，建議禁用點(diǎn)標(biāo)記，因?yàn)檫@會(huì)增加性能開(kāi)銷(xiāo)。

3. 禁用陰影可提高性能，因?yàn)闀?huì)為每個(gè)包含陰影的形狀創(chuàng)建三個(gè)陰影元素。

4. 對(duì)于大型列系列，建議至少對(duì)于基于VML的瀏覽器禁用初始動(dòng)畫(huà)plotOptions.column.animation。區(qū)分快速SVG瀏覽器和較慢的VML瀏覽器的最佳方法是使用Highcharts.svg布爾屬性。

我可以將多個(gè)圖表導(dǎo)出到同一圖像或PDF嗎？

當(dāng)前，該功能尚未在核心中實(shí)現(xiàn)，但是您可以通過(guò)幾種方法來(lái)實(shí)現(xiàn)。 

1. 使用我們的技巧來(lái)導(dǎo)出多個(gè)圖表。基本上，此代碼獲取所有圖表的SVG，對(duì)其進(jìn)行修改并將其應(yīng)用于一個(gè)單獨(dú)的SVG文件，該文件將發(fā)送到服務(wù)器以進(jìn)行圖像轉(zhuǎn)換。如果需要將數(shù)據(jù)發(fā)送到我們的服務(wù)器，我們還支持使用客戶(hù)端導(dǎo)出模塊。

2. 在服務(wù)器上創(chuàng)建一個(gè)HTML文件，其中包含所有所需的圖表，并對(duì)此進(jìn)行純服務(wù)器端轉(zhuǎn)換。

我的非英文字符未正確顯示在我的圖表中

如果您使用的是德國(guó)變音符號(hào)，Scandinavian vowels或非歐洲字母，則需要對(duì)文件使用UTF-8編碼。有兩種方法可以做到這一點(diǎn)。

確保定義圖表的HTML頁(yè)面為UTF-8。文件本身以及數(shù)據(jù)庫(kù)內(nèi)容（如果適用）必須編碼為UTF-8。此外，content-typeHTTP標(biāo)頭或相應(yīng)的元標(biāo)記必須反映以下內(nèi)容：

< meta http-equiv = “ content-type ” content = “ text / html; charset = utf-8 ” />

如果您無(wú)權(quán)更改整個(gè)HTML文件，則可以在具有UTF-8編碼的單獨(dú)JS文件中定義圖表。 

<script src="charts.js" charset="UTF-8"></script>

我可以在不使用瀏覽器的情況下在服務(wù)器上生成圖表嗎？

可以，詳情請(qǐng)關(guān)注我們后續(xù)的文章教程。

如何定義不規(guī)則時(shí)間數(shù)據(jù)？

要以不規(guī)則的間隔添加數(shù)據(jù)點(diǎn)，而不是為系列定義pointStart和pointInterval，請(qǐng)為每個(gè)點(diǎn)定義一個(gè)X值（日期）。

如果您希望該行在缺少日期的情況下中斷，請(qǐng)插入空值。

如何從MySQL數(shù)據(jù)庫(kù)添加數(shù)據(jù)？

詳情請(qǐng)關(guān)注我們后續(xù)的文章教程。

您的國(guó)家/地區(qū)地圖不包含有爭(zhēng)議的區(qū)域

我們盡我們所能，不要站在邊界沖突中，但是我們意識(shí)到需要包括有爭(zhēng)議地區(qū)的地圖。為了解決這個(gè)問(wèn)題，我們嘗試使默認(rèn)地圖符合中立的事實(shí)上的邊界或慣例，同時(shí)提供包含有爭(zhēng)議區(qū)域的替代地圖。

重要推薦：

• 純JavaScript編寫(xiě)的開(kāi)源股票圖表控件：Highstock

• 一個(gè)基于web項(xiàng)目創(chuàng)建地圖的HTML5/JavaScript地圖組件：Highmaps

=====================================================

想要購(gòu)買(mǎi)Highcharts正版授權(quán)的朋友可以。

更多精彩內(nèi)容，敬請(qǐng)關(guān)注下方的微信公眾號(hào)，及時(shí)獲取產(chǎn)品最新資訊▼▼▼