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

點擊下載Anychart最新試用版

自定義JS熱圖圖表

如您所見，上面構建的基本圖表可能不足以有效地傳達所有必須說的數(shù)據(jù)。這是定制化的地方，因為更改外觀（例如顏色和文本）可以使圖表對最終用戶更清晰易懂。

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

讓我們進行以下修改。

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

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

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

在這里，有必要使用anychart.scales.ordinalColor();構造函數(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);

添加熱圖圖表圖例

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

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

chart.legend(true);

現(xiàn)在，您可能需要更改圖例中顯示的信息，以使其更具信息性。例如，在這里我要顯示范圍名稱，以便查看者可以清楚地了解哪種顏色編碼了哪個范圍。一種方法是在顏色范圍構造函數(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' }
]);

隱藏標簽和修改工具提示

標簽

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

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

chart.labels().enabled(false)

工具提示

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

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

此修改的代碼如下：

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

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

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

tooltip.fontWeight(600);

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

要添加所有這些信息，請使用包含這些名稱的數(shù)組，因為無法從代碼中的其他位置立即訪問它們：

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代碼中的符號。它增加了一個換行符。

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

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)在我們可以清楚地看到，在考慮的時期內(nèi)，世界上人類發(fā)展的人類發(fā)展水平有所提高。阿拉伯國家地區(qū)的HDI和東亞及太平洋地區(qū)的HDI從“中”提高到“高”。世界上沒有一個地區(qū)的HDI值達到“非常高”的范圍。撒哈拉以南非洲的人類發(fā)展指數(shù)處于最低水平。人類發(fā)展指數(shù)最高的兩個地區(qū)是歐洲和中亞以及拉丁美洲和加勒比地區(qū)。

結論

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

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

想要購買Anychart正版授權的朋友可以。

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