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

點擊下載Anychart最新試用版

自定義JS熱圖圖表

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

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

讓我們進行以下修改。

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

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

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

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

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

添加熱圖圖表圖例

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

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

chart.legend(true);

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

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' }
]);

隱藏標簽和修改工具提示

標簽

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

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

chart.labels().enabled(false)

工具提示

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

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

此修改的代碼如下：

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

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

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

tooltip.fontWeight(600);

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

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

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

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

結論

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

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

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

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