JavaScript圖表工具FusionCharts入門教程(40)：如何創建Heat Map圖表
FusionCharts Suite XT是全面的跨平臺、跨瀏覽器JavaScript圖表套包，其中包括FusionCharts XT、PowerCharts XT 、FusionWidgets XT、FusionMaps XT。支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至簡單的HTML頁面。它是你值得信賴的JavaScript圖表解決方案，目前在全球有45萬用戶選擇Fusioncharts來制作專業的JavaScript圖表。
熱圖圖是一種專用圖，它使用顏色表示表中的數據值。當您需要繪制大型和復雜數據時，您會發現它最有用。
熱圖圖表的基礎
您可以使用熱圖來繪制數據，例如員工出勤記錄，周期表，跟蹤股市投資，比較不同公司的業績等。您可以為不同級別的數據設置不同的顏色。例如，如果使用熱圖圖表繪制員工出勤記錄，則可以使用百分比百分比值來表示紅色，黃色，藍色和綠色（例如，紅色，黃色，藍色和綠色），分別表示不良，平均，良好和優良等級。繪制圖表后，您將可以輕松地區分四個等級。
熱圖圖表特點
使用熱圖圖表，您可以：
- 以表格格式排列數據，其中包含有限數量的行和列。
- 繪制數字或非數字數據，或同時繪制兩者。
- 使用純色或漸變表示數據值內的不同范圍。
- 使用交互式圖例顯示或隱藏數據圖。
- 隱藏任何超出定義的顏色范圍限制的數據。
- 使用兩種不同類型的圖例-圖標圖例和漸變圖例。
使用FusionCharts Suite XT，您可以構建兩種類型的熱圖圖表。使用數字熱圖來繪制數字數據，使用基于類別的熱圖來繪制非數字數據。這些圖表如下圖所示：
數字熱圖圖表
如前所述，您可以在熱圖圖表中使用兩種不同類型的圖例：
梯度傳說
- 使用以下屬性創建簡單的數字熱圖圖表：
- 使用rowID屬性指定必須在其中輸入數據的行的唯一ID 。
- 使用columnID屬性指定必須在其中輸入數據的列的唯一ID 。
- 使用value屬性指定要在單元格中輸入的數據值。
- 指定在所述數據圖的左上，右上，左下，以及右下的角將被顯示的標簽，使用tlLabel，trLabel，blLabel，和brLabel，分別屬性。
- 使用code屬性，為代表特定范圍的顏色指定十六進制代碼。
- 使用minValue屬性指定可以在圖表上繪制的最小值。
- 使用maxValue屬性指定可以在圖表上繪制的最大值。
在上面給出的圖表中，您可以看到該圖表會根據為數據對象定義行和列的順序自動確定行和列的順序。因此，圖表顯示Samsung Galaxy S5在第一行，HTC One (M8)第二行，依此類推。
但是，還有另一種方法可以繪制基于數字的熱圖圖表，您可以在其中預定義行和列的順序。完成此操作后，您可以通過數據對象以任何順序提供數據。圖表將按照您預先定義的順序顯示它們。
使用以下屬性預定義行和列的順序：
- 使用id屬性為數據項定義唯一ID 。
- 使用label屬性為數據項定義標簽。
請參考下面的代碼：
{
"chart": {
...
},
"rows": {
"row": [{
"id": "IPHONES5",
"label": "Apple iPhone 5S"
},
{
"id": "SGS5",
"label": "Samsung Galaxy S5"
},
{
"id": "HTC1M8",
"label": "HTC One (M8)"
},
{
"id": "LUMIA",
"label": "Nokia Lumia 1520"
}]
},
"columns": {
"column": [{
"id": "price",
"label": "Price"
},
{
"id": "processor",
"label": "Processor"
},
{
"id": "screen",
"label": "Screen Size"
},
{
"id": "backup",
"label": "Battery Backup"
},
{
"id": "cam",
"label": "Camera"
}]
},
"dataset": [{
"data": [{
...
}]
}]
}
該圖表如下圖所示：
使用color帶有屬性的data對象，指定將應用于單元格的顏色的十六進制代碼。
請參考下面的代碼：
{
"chart": {
...
},
"rows": {
"row": [{
...
}]
},
"columns": {
"column": [{
...
}]
},
"dataset": [{
"data": [{
"rowid": "IPHONES5",
"columnid": "processor",
"value": "9.1",
"tlLabel": "Dual Core",
"trLabel": "OS : iOS 7",
"color": "#d45faa"
},
{
"rowid": "SGS5",
"columnid": "processor",
"value": "8.7",
"tlLabel": "Quad Core 2.5 GHz",
"trLabel": "OS : Android 4.4 Kitkat",
"color": "#ff9f55"
}]
}]
}
該圖表如下圖所示：
創建基于類別的熱圖圖表
您可以通過定義幾個顏色類別或范圍來進行基于類別的映射，并為單元格設置特定的顏色類別。您無需將數字值映射到值范圍。而是使用顏色范圍來映射具有顏色類別的單元格。
使用以下屬性創建基于類別的熱圖圖表：
- 將mapByCateory屬性的值設置為1，以創建基于類別的熱圖。
- 使用id帶有row（或column）對象的屬性，指定必須在其中輸入數據的行（或列）的唯一ID 。
- 指定的標簽將被渲染為行，列，和圖例，使用label屬性與row，column，和color分別對象。請注意，如果您沒有為數字范圍指定標簽，則圖表將顯示范圍而不是標簽。
- 使用rowID屬性指定必須在其中輸入數據的行的唯一ID 。
- 使用columnID屬性指定必須在其中輸入數據的列的唯一ID 。
- 使用value屬性指定要在單元格中輸入的數據值。
- 指定在所述數據圖的左上，右上，左下，以及右下的角將被顯示的標簽，使用tlLabel，trLabel，blLabel，和brLabel，分別屬性。
- 使用code屬性，為代表特定范圍的顏色指定十六進制代碼。
- 使用minValue屬性指定可以在圖表上繪制的最小值。
- 使用maxValue屬性指定可以在圖表上繪制的最大值。
{
"chart": {
...
},
"rows": {
"row": [{
"id": "NY",
"label": "New York"
},
{
"id": "LA",
"label": "Los Angeles"
},
{
...
}]
},
"columns": {
"column": [{
"id": "wI",
"label": "Winter"
},
{
"id": "SU",
"label": "Summer"
},
{
...
}]
},
"dataset": [{
"data": [{
"rowid": "LA",
"columnid": "WI",
"value": "60.10",
"colorRangeLabel": "Warm"
},
{
"rowid": "LA",
"columnid": "SP",
"displayValue": "64.5",
"colorRangeLabel": "Warm"
},
{
...
}]
}],
"colorRange": {
"gradient": "0",
"color": [{
...
}]
}
}
該圖表如下圖所示：
圖例選項
您可以在使用FusionCharts Suite XT構建的熱圖圖表中創建兩種類型的圖例-圖標圖例和漸變圖例。
創建一個圖標示例
使用圖標圖例，可以顯示數字范圍的單色圖標。默認情況下，熱圖圖表將帶有圖標圖例。
使用以下屬性為圖例中的每個圖標指定顏色：
- 使用code屬性，指定表示圖例中特定顏色范圍的顏色的十六進制代碼。請注意，可以將此屬性與colorRange或color對象一起使用。在中colorRange，將gradient屬性設置為1（漸變圖例）時，需要使用下的code屬性colorRange同時指定minValue和color對象的顏色。另一方面，將gradientattribute的值設置為0（圖標圖例）時，需要使用該color對象來呈現圖表。
- 使用minValue屬性指定每個數值范圍的下限。color每當使用圖標圖例時，都必須在每個對象下提及此屬性。
- 使用maxValue屬性指定每個數值范圍的上限。color每當使用漸變或圖標圖例時，都必須在每個對象下提及此屬性。
{
"chart": {
...
},
"dataset": [{
"data": [{
...
}]
}],
"colorrange": {
...
"color": [{
"code": "E24B1A",
"minvalue": "1",
"maxvalue": "5",
"label": "Bad"
}, {
"code": "F6BC33",
"minvalue": "5",
"maxvalue": "8.5",
"label": "Average"
}, {
"code": "6DA81E",
"minvalue": "8.5",
"maxvalue": "10",
"label": "Good"
}]
}
}
圖標圖例使用交互
圖標圖例是交互式的。您可以單擊圖例項以顯示或隱藏以圖例項表示的顏色范圍映射的所有單元格。隱藏所有“平均”評級的熱圖圖表看起來如下圖所示：
漸變圖例是從colorRange定義派生的混合顏色窗格，其特征是使用兩個可拖動的指針繪制線性比例。您為數字范圍定義的每種顏色都將與下一個顏色混合，從而形成漸變條。漸變比例尺上的每個點都代表唯一的顏色和值。因此，圖表中所有不同的值都按照漸變標度上的位置以唯一的顏色顯示。
使用以下屬性來配置漸變圖例：
- 通過將gradient屬性的值設置為，指定是否為圖表呈現漸變圖例1。
- 使用startLabel屬性指定漸變圖例下限的標簽。
- 使用endLabel屬性指定漸變圖例上限的標簽。
- 使用code屬性，指定表示圖例中特定顏色范圍的顏色的十六進制代碼。請注意，可以將此屬性與colorRange或color對象一起使用。在中colorRange，將gradient屬性設置為1（漸變圖例）時，需要使用下的code屬性colorRange同時指定minValue和color對象的顏色。
{
"chart": {
...
},
"dataset": [{
"data": [{
...
}]
}],
"colorRange": {
"gradient": "1",
"minValue": "0",
"code": "#e24b1a",
"startLabel": "Poor",
"endLabel": "Good",
"color": [{
"code": "#e24b1a",
"minValue": "1",
"maxValue": "5",
"label": "Bad"
}, {
"code": "#f6bc33",
"minValue": "5",
"maxValue": "7",
"label": "Average"
}, {
"code": "#6da81e",
"minValue": "7",
"maxValue": "10",
"label": "Good"
}]
}
}
該圖表如下圖所示：
默認情況下，使用多種不同的顏色渲染漸變圖例。但是，您也可以使用相同顏色的陰影渲染漸變圖例。為此，請使用對象code下的屬性設置單色的十六進制代碼colorRange。
請參考下面的代碼：
{
"chart": {
...
},
"rows": {
"row": [{
...
}]
},
"columns": {
"column": [{
...
}]
},
"dataset": [{
"data": [{
...
}]
}],
"colorRange": {
"gradient": "1",
"minValue": "0",
"code": "#2a7faa",
"startLabel": "Not satisfied",
"endLabel": "Love it!"
}
}
該圖表如下圖所示：
顯示/隱藏數據值
使用漸變圖例，可以過濾特定值范圍內的單元格。要指定圖表上應顯示的范圍，請在兩個或多個刻度指針中的任意一個或兩個上單擊并按住鼠標，然后將其拖動以設置所需的下限和上限。圖表將僅顯示位于該范圍內的那些數據圖，同時隱藏其余數字。
配置標簽和工具提示
使用FusionCharts XT，可以配置標簽和工具提示的功能屬性。
配置標簽
在熱圖圖中，可以為同一數據圖在不同位置顯示多個標簽。例如，您可以在數據圖的中心和四個角顯示標簽。使用以下屬性來配置標簽：
- 使用該value屬性在數據圖的中心顯示一個數值。如果使用此屬性，則所有數字格式設置功能都將適用。
- 使用displayValue屬性在數據圖的中心顯示任何數字或字符串值。value如果您在代碼中同時使用該屬性，則該屬性將覆蓋該屬性。請注意，數字格式設置功能不適用于此屬性的值。
- 使用tlLabel屬性在數據圖的左上角顯示標簽。
- 使用trLabel屬性在數據圖的右上角顯示標簽。
- 使用blLabel屬性在數據圖的左下角顯示標簽。
- 使用brLabel屬性在數據圖的右下角顯示標簽。
{
"chart": {
...
},
"rows": {
"row": [{
...
}]
},
"columns": {
"column": [{
...
}]
},
"dataset": [{
"data": [{
"rowid": "SGS5",
"columnid": "processor",
"value": "8.7",
"tlLabel": "Quad Core 2.5 GHz"
},
{
...
}]
}],
"colorrange": {
...
"color": [{
...
}]
}
}
配置工具提示
缺省情況下，熱圖圖表通過包括分配給所述值的值配置工具提示，displayValue，trLabel，tlLabel，brLabel，blLabel，tlType，trType，blType，和brType屬性。但是，在FusionCharts Suite XT中，您可以使用plotToolText屬性指定將在工具提示中顯示的自定義文本。
請參考下面的代碼：
{
"chart": {
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5",
},
"rows": {
"row": [{
...
}]
},
"columns": {
"column": [{
...
}]
},
"dataset": [{
"data": [{
"rowid": "SGS5",
"columnid": "processor",
"value": "8.7",
"tllabel": "Quad Core 2.5 GHz",
"trlabel": "OS : Android 4.4 Kitkat"
}, {
...
}]
}],
"colorrange": {
...
"color": [{
...
}]
}
}
該圖表如下圖所示：
如果數據值超出您在colorRange對象中定義的數字范圍；圖表顯示空白數據圖。針對超出范圍的數據繪制了帶有空白數據圖的圖表，如下所示：
請參考下面的代碼：
{
"chart": {
...
},
"rows": {
"row": [{
...
}]
},
"columns": {
"column": [{
...
}]
},
"dataset": [{
"data": [{
...
}]
}],
"colorRange": {
"gradient": "1",
"minValue": "0",
"code": "#2a7faa",
"startLabel": "Not satisfied",
"endLabel": "Love it!"
}
}
為避免出現這種空白數據圖，可以為熱圖圖表啟用百分比映射。
地圖按百分比數據
使用百分比映射，可以按百分比顯示數據值。將mapByPercent屬性的值設置為1，以為熱圖圖表啟用百分比映射。
請參考下面的代碼：
{
"chart": {
...
},
"rows": {
"row": [{
...
}]
},
"columns": {
"column": [{
...
}]
},
"dataset": [{
"data": [{
"rowid": "JA",
"columnid": "EN",
"value": "3.7"
}, {
...
}]
}],
"colorRange": {
...
}
}
該圖表如下圖所示：
使用百分比映射時，JSON數據中的最低數據值被視為下限，并顯示為0％。另一方面，最高數據值被視為上限，并顯示為100％。另外，您需要創建顏色范圍，下限為0，上限為100。即使所有數據值都在定義的范圍內，也可以啟用百分比映射。
在基于類別的熱圖圖表中，如果colorRangeLabel通過data元素提供的屬性（未在colorRange元素中定義）提供類別名稱，則圖表將顯示空白數據圖。想要購買FusionCharts Suite XT正版授權，或了解更多產品信息請點擊
QQ交談
在線咨詢
渝公網安備
50010702500608號
客服熱線