AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創(chuàng)建跨瀏覽器和跨平臺(tái)的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報(bào)表、數(shù)據(jù)分析、統(tǒng)計(jì)學(xué)、金融等領(lǐng)域。重要推薦：

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

自定義JS熱圖圖表

如您所見，上面構(gòu)建的基本圖表可能不足以有效地傳達(dá)所有必須說的數(shù)據(jù)。這是定制化的地方，因?yàn)楦耐庥^（例如顏色和文本）可以使圖表對(duì)最終用戶更清晰易懂。

AnyChart不僅使您能夠輕松創(chuàng)建交互式JavaScript圖表（包括熱圖），而且還使您可以根據(jù)自己的需要和品味自由更改它。

讓我們進(jìn)行以下修改。

• 創(chuàng)建一個(gè)新的自定義色標(biāo)。
• 添加圖例。
• 隱藏標(biāo)簽并修改工具提示。

 HDI具有四個(gè)預(yù)定義的值范圍類別-“低”，“中”，“高”和“非常高”。高的人類發(fā)展指數(shù)意味著更長的壽命，更高的教育水平以及更高的人均國民總收入。為了更好地傳達(dá)此信息，讓我們創(chuàng)建一個(gè)自定義的色標(biāo)，使用順序色標(biāo)將每個(gè)顏色范圍編碼為不同的顏色。

該標(biāo)尺具有特定的域和顏色范圍。因此，現(xiàn)在我將每個(gè)類別設(shè)置為一個(gè)域，并根據(jù)類似于交通信號(hào)燈的調(diào)色板指定其顏色。

在這里，有必要使用anychart.scales.ordinalColor();構(gòu)造函數(shù)，然后設(shè)置范圍：

var customColorScale = anychart.scales.ordinalColor();
customColorScale.ranges([
  { less: 0.549 },
  { from: 0.550, to: 0.699 },
  { from: 0.700, to: 0.799 },
  { greater: 0.800 }
]);

customColorScale.colors(["#CF7A78", "#E69645", "#69A231", "#4D7623"]);

chart.colorScale(customColorScale);

添加熱圖圖表圖例

圖例可幫助用戶識(shí)別圖表顯示的內(nèi)容。解釋每種顏色和范圍代表的含義時(shí)，它們就像相應(yīng)數(shù)據(jù)可視化的手冊(cè)。

要添加圖例，只需一行簡單的代碼就足夠了：

chart.legend(true);

現(xiàn)在，您可能需要更改圖例中顯示的信息，以使其更具信息性。例如，在這里我要顯示范圍名稱，以便查看者可以清楚地了解哪種顏色編碼了哪個(gè)范圍。一種方法是在顏色范圍構(gòu)造函數(shù)中指定名稱，如下所示：

var customColorScale = anychart.scales.ordinalColor();
customColorScale.ranges([
  { less: 0.549, name: 'Low: <= 0.549', color: '#CF7A78' }, { from: 0.550, to: 0.699, name: 'Medium: 0.55 - 0.699', color: '#E69645' }, { from: 0.700, to: 0.799, name: 'High: 0.7 - 0.799', color: '#69A231' }, { greater: 0.800, name: 'Very High: >=0.8', color: '#4D7623' }
]);

隱藏標(biāo)簽和修改工具提示

標(biāo)簽

最后，您可以看到由于單元格中的所有這些數(shù)字，熱圖圖表看起來有些密集，甚至有些混亂。顏色已經(jīng)成功地對(duì)范圍進(jìn)行了編碼，因此可以從單元格中隱藏?cái)?shù)字，而可以將其作為額外信息顯示在工具提示中以及范圍名稱。

僅用一行就可以從單元格中隱藏?cái)?shù)字。繼續(xù)添加：

chart.labels().enabled(false)

工具提示

在定制熱圖圖表工具提示時(shí)，您可以做很多事情。

1.讓我們從更改工具提示位置開始。默認(rèn)情況下，位置模式設(shè)置為float，使工具提示跟隨光標(biāo)。我想設(shè)置工具提示位置模式，point 以防止當(dāng)您將鼠標(biāo)懸停在單元格上時(shí)其移動(dòng)，希望此步驟將使閱讀提供的信息更加容易。

此修改的代碼如下：

var tooltip = chart.tooltip();
tooltip.positionMode("point");

2.同樣，可以更改使用CSS屬性指定的工具提示外觀（例如，背景和文本顏色）。在“ 部分中，您可以找到這些屬性的一些示例，并獲得一些想法以應(yīng)用自己的樣式。

在這里，我將修改一個(gè)名為CSS的屬性，以fontWeight使文本顯示為粗體，因此更加鮮明。您可以將數(shù)字值添加到此屬性（例如600），也可以使用bold關(guān)鍵字：

tooltip.fontWeight(600);

3.讓我們?cè)僮鲆淮涡薷?，以向工具提示中顯示的內(nèi)容添加一些信息。首先，隱藏在單元格中的數(shù)字將顯示在工具提示中，從而使對(duì)精確值感興趣的人可以快速訪問它們。其次，我想包含范圍名稱以解釋數(shù)字的含義。

要添加所有這些信息，請(qǐng)使用包含這些名稱的數(shù)組，因?yàn)闊o法從代碼中的其他位置立即訪問它們：

var categoryNames = ["Low", "Medium", "High", "Very High"]

tooltip.format(function () {
  if (this.heat <= 0.549) { return ("Value: " + this.heat + "\n Category: " + categoryNames[0]); } if (this.heat >= 0.55 && this.heat <= 0.699) { return ("Value: " + this.heat + "\n Category: " + categoryNames[1]); } if (this.heat >= 0.7 && this.heat <= 0.799) { return ("Value: " + this.heat + "\n Category: " + categoryNames[2]); } });

注意\n代碼中的符號(hào)。它增加了一個(gè)換行符。

為了方便起見，以下是“工具提示”部分的完整代碼：

var categoryNames = ["Low", "Medium", "High", "Very High"]

var tooltip = chart.tooltip();
tooltip.fontWeight(600);
tooltip.positionMode("point");        
tooltip.format(function () {
  if (this.heat <= 0.549) { return ("Value: " + this.heat + "\n Category: " + categoryNames[0]); } if (this.heat >= 0.55 && this.heat <= 0.699) { return ("Value: " + this.heat + "\n Category: " + categoryNames[1]); } if (this.heat >= 0.7 && this.heat <= 0.799) { return ("Value: " + this.heat + "\n Category: " + categoryNames[2]); } });

新的熱圖比初始圖看起來更漂亮，信息量更大，不是嗎？現(xiàn)在我們可以清楚地看到，在考慮的時(shí)期內(nèi)，世界上人類發(fā)展的人類發(fā)展水平有所提高。阿拉伯國家地區(qū)的HDI和東亞及太平洋地區(qū)的HDI從“中”提高到“高”。世界上沒有一個(gè)地區(qū)的HDI值達(dá)到“非常高”的范圍。撒哈拉以南非洲的人類發(fā)展指數(shù)處于最低水平。人類發(fā)展指數(shù)最高的兩個(gè)地區(qū)是歐洲和中亞以及拉丁美洲和加勒比地區(qū)。

結(jié)論

教程已經(jīng)表明，為網(wǎng)站和應(yīng)用程序創(chuàng)建交互式JavaScript圖表不必太復(fù)雜。使用AnyChart庫，您可以在幾分鐘內(nèi)獲得漂亮的數(shù)據(jù)可視化，然后輕松地根據(jù)需要自定義它。

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

想要購買Anychart正版授權(quán)的朋友可以。

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