JavaScript圖表工具FusionCharts入門教程(40)：如何創(chuàng)建Heat Map圖表
FusionCharts Suite XT是全面的跨平臺(tái)、跨瀏覽器JavaScript圖表套包，其中包括FusionCharts XT、PowerCharts XT 、FusionWidgets XT、FusionMaps XT。支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至簡(jiǎn)單的HTML頁面。它是你值得信賴的JavaScript圖表解決方案，目前在全球有45萬用戶選擇Fusioncharts來制作專業(yè)的JavaScript圖表。
熱圖圖是一種專用圖，它使用顏色表示表中的數(shù)據(jù)值。當(dāng)您需要繪制大型和復(fù)雜數(shù)據(jù)時(shí)，您會(huì)發(fā)現(xiàn)它最有用。
熱圖圖表的基礎(chǔ)
您可以使用熱圖來繪制數(shù)據(jù)，例如員工出勤記錄，周期表，跟蹤股市投資，比較不同公司的業(yè)績(jī)等。您可以為不同級(jí)別的數(shù)據(jù)設(shè)置不同的顏色。例如，如果使用熱圖圖表繪制員工出勤記錄，則可以使用百分比百分比值來表示紅色，黃色，藍(lán)色和綠色（例如，紅色，黃色，藍(lán)色和綠色），分別表示不良，平均，良好和優(yōu)良等級(jí)。繪制圖表后，您將可以輕松地區(qū)分四個(gè)等級(jí)。
熱圖圖表特點(diǎn)
使用熱圖圖表，您可以：
- 以表格格式排列數(shù)據(jù)，其中包含有限數(shù)量的行和列。
- 繪制數(shù)字或非數(shù)字?jǐn)?shù)據(jù)，或同時(shí)繪制兩者。
- 使用純色或漸變表示數(shù)據(jù)值內(nèi)的不同范圍。
- 使用交互式圖例顯示或隱藏?cái)?shù)據(jù)圖。
- 隱藏任何超出定義的顏色范圍限制的數(shù)據(jù)。
- 使用兩種不同類型的圖例-圖標(biāo)圖例和漸變圖例。
使用FusionCharts Suite XT，您可以構(gòu)建兩種類型的熱圖圖表。使用數(shù)字熱圖來繪制數(shù)字?jǐn)?shù)據(jù)，使用基于類別的熱圖來繪制非數(shù)字?jǐn)?shù)據(jù)。這些圖表如下圖所示：
數(shù)字熱圖圖表
如前所述，您可以在熱圖圖表中使用兩種不同類型的圖例：
梯度傳說
- 使用以下屬性創(chuàng)建簡(jiǎn)單的數(shù)字熱圖圖表：
- 使用rowID屬性指定必須在其中輸入數(shù)據(jù)的行的唯一ID 。
- 使用columnID屬性指定必須在其中輸入數(shù)據(jù)的列的唯一ID 。
- 使用value屬性指定要在單元格中輸入的數(shù)據(jù)值。
- 指定在所述數(shù)據(jù)圖的左上，右上，左下，以及右下的角將被顯示的標(biāo)簽，使用tlLabel，trLabel，blLabel，和brLabel，分別屬性。
- 使用code屬性，為代表特定范圍的顏色指定十六進(jìn)制代碼。
- 使用minValue屬性指定可以在圖表上繪制的最小值。
- 使用maxValue屬性指定可以在圖表上繪制的最大值。
在上面給出的圖表中，您可以看到該圖表會(huì)根據(jù)為數(shù)據(jù)對(duì)象定義行和列的順序自動(dòng)確定行和列的順序。因此，圖表顯示Samsung Galaxy S5在第一行，HTC One (M8)第二行，依此類推。
但是，還有另一種方法可以繪制基于數(shù)字的熱圖圖表，您可以在其中預(yù)定義行和列的順序。完成此操作后，您可以通過數(shù)據(jù)對(duì)象以任何順序提供數(shù)據(jù)。圖表將按照您預(yù)先定義的順序顯示它們。
使用以下屬性預(yù)定義行和列的順序：
- 使用id屬性為數(shù)據(jù)項(xiàng)定義唯一ID 。
- 使用label屬性為數(shù)據(jù)項(xiàng)定義標(biāo)簽。
請(qǐng)參考下面的代碼：
{
"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對(duì)象，指定將應(yīng)用于單元格的顏色的十六進(jìn)制代碼。
請(qǐng)參考下面的代碼：
{
"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"
}]
}]
}
該圖表如下圖所示：
創(chuàng)建基于類別的熱圖圖表
您可以通過定義幾個(gè)顏色類別或范圍來進(jìn)行基于類別的映射，并為單元格設(shè)置特定的顏色類別。您無需將數(shù)字值映射到值范圍。而是使用顏色范圍來映射具有顏色類別的單元格。
使用以下屬性創(chuàng)建基于類別的熱圖圖表：
- 將mapByCateory屬性的值設(shè)置為1，以創(chuàng)建基于類別的熱圖。
- 使用id帶有row（或column）對(duì)象的屬性，指定必須在其中輸入數(shù)據(jù)的行（或列）的唯一ID 。
- 指定的標(biāo)簽將被渲染為行，列，和圖例，使用label屬性與row，column，和color分別對(duì)象。請(qǐng)注意，如果您沒有為數(shù)字范圍指定標(biāo)簽，則圖表將顯示范圍而不是標(biāo)簽。
- 使用rowID屬性指定必須在其中輸入數(shù)據(jù)的行的唯一ID 。
- 使用columnID屬性指定必須在其中輸入數(shù)據(jù)的列的唯一ID 。
- 使用value屬性指定要在單元格中輸入的數(shù)據(jù)值。
- 指定在所述數(shù)據(jù)圖的左上，右上，左下，以及右下的角將被顯示的標(biāo)簽，使用tlLabel，trLabel，blLabel，和brLabel，分別屬性。
- 使用code屬性，為代表特定范圍的顏色指定十六進(jìn)制代碼。
- 使用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": [{
...
}]
}
}
該圖表如下圖所示：
圖例選項(xiàng)
您可以在使用FusionCharts Suite XT構(gòu)建的熱圖圖表中創(chuàng)建兩種類型的圖例-圖標(biāo)圖例和漸變圖例。
創(chuàng)建一個(gè)圖標(biāo)示例
使用圖標(biāo)圖例，可以顯示數(shù)字范圍的單色圖標(biāo)。默認(rèn)情況下，熱圖圖表將帶有圖標(biāo)圖例。
使用以下屬性為圖例中的每個(gè)圖標(biāo)指定顏色：
- 使用code屬性，指定表示圖例中特定顏色范圍的顏色的十六進(jìn)制代碼。請(qǐng)注意，可以將此屬性與colorRange或color對(duì)象一起使用。在中colorRange，將gradient屬性設(shè)置為1（漸變圖例）時(shí)，需要使用下的code屬性colorRange同時(shí)指定minValue和color對(duì)象的顏色。另一方面，將gradientattribute的值設(shè)置為0（圖標(biāo)圖例）時(shí)，需要使用該color對(duì)象來呈現(xiàn)圖表。
- 使用minValue屬性指定每個(gè)數(shù)值范圍的下限。color每當(dāng)使用圖標(biāo)圖例時(shí)，都必須在每個(gè)對(duì)象下提及此屬性。
- 使用maxValue屬性指定每個(gè)數(shù)值范圍的上限。color每當(dāng)使用漸變或圖標(biāo)圖例時(shí)，都必須在每個(gè)對(duì)象下提及此屬性。
{
"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"
}]
}
}
圖標(biāo)圖例使用交互
圖標(biāo)圖例是交互式的。您可以單擊圖例項(xiàng)以顯示或隱藏以圖例項(xiàng)表示的顏色范圍映射的所有單元格。隱藏所有“平均”評(píng)級(jí)的熱圖圖表看起來如下圖所示：
漸變圖例是從colorRange定義派生的混合顏色窗格，其特征是使用兩個(gè)可拖動(dòng)的指針繪制線性比例。您為數(shù)字范圍定義的每種顏色都將與下一個(gè)顏色混合，從而形成漸變條。漸變比例尺上的每個(gè)點(diǎn)都代表唯一的顏色和值。因此，圖表中所有不同的值都按照漸變標(biāo)度上的位置以唯一的顏色顯示。
使用以下屬性來配置漸變圖例：
- 通過將gradient屬性的值設(shè)置為，指定是否為圖表呈現(xiàn)漸變圖例1。
- 使用startLabel屬性指定漸變圖例下限的標(biāo)簽。
- 使用endLabel屬性指定漸變圖例上限的標(biāo)簽。
- 使用code屬性，指定表示圖例中特定顏色范圍的顏色的十六進(jìn)制代碼。請(qǐng)注意，可以將此屬性與colorRange或color對(duì)象一起使用。在中colorRange，將gradient屬性設(shè)置為1（漸變圖例）時(shí)，需要使用下的code屬性colorRange同時(shí)指定minValue和color對(duì)象的顏色。
{
"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"
}]
}
}
該圖表如下圖所示：
默認(rèn)情況下，使用多種不同的顏色渲染漸變圖例。但是，您也可以使用相同顏色的陰影渲染漸變圖例。為此，請(qǐng)使用對(duì)象code下的屬性設(shè)置單色的十六進(jìn)制代碼colorRange。
請(qǐng)參考下面的代碼：
{
"chart": {
...
},
"rows": {
"row": [{
...
}]
},
"columns": {
"column": [{
...
}]
},
"dataset": [{
"data": [{
...
}]
}],
"colorRange": {
"gradient": "1",
"minValue": "0",
"code": "#2a7faa",
"startLabel": "Not satisfied",
"endLabel": "Love it!"
}
}
該圖表如下圖所示：
顯示/隱藏?cái)?shù)據(jù)值
使用漸變圖例，可以過濾特定值范圍內(nèi)的單元格。要指定圖表上應(yīng)顯示的范圍，請(qǐng)?jiān)趦蓚€(gè)或多個(gè)刻度指針中的任意一個(gè)或兩個(gè)上單擊并按住鼠標(biāo)，然后將其拖動(dòng)以設(shè)置所需的下限和上限。圖表將僅顯示位于該范圍內(nèi)的那些數(shù)據(jù)圖，同時(shí)隱藏其余數(shù)字。
配置標(biāo)簽和工具提示
使用FusionCharts XT，可以配置標(biāo)簽和工具提示的功能屬性。
配置標(biāo)簽
在熱圖圖中，可以為同一數(shù)據(jù)圖在不同位置顯示多個(gè)標(biāo)簽。例如，您可以在數(shù)據(jù)圖的中心和四個(gè)角顯示標(biāo)簽。使用以下屬性來配置標(biāo)簽：
- 使用該value屬性在數(shù)據(jù)圖的中心顯示一個(gè)數(shù)值。如果使用此屬性，則所有數(shù)字格式設(shè)置功能都將適用。
- 使用displayValue屬性在數(shù)據(jù)圖的中心顯示任何數(shù)字或字符串值。value如果您在代碼中同時(shí)使用該屬性，則該屬性將覆蓋該屬性。請(qǐng)注意，數(shù)字格式設(shè)置功能不適用于此屬性的值。
- 使用tlLabel屬性在數(shù)據(jù)圖的左上角顯示標(biāo)簽。
- 使用trLabel屬性在數(shù)據(jù)圖的右上角顯示標(biāo)簽。
- 使用blLabel屬性在數(shù)據(jù)圖的左下角顯示標(biāo)簽。
- 使用brLabel屬性在數(shù)據(jù)圖的右下角顯示標(biāo)簽。
{
"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屬性指定將在工具提示中顯示的自定義文本。
請(qǐng)參考下面的代碼：
{
"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": [{
...
}]
}
}
該圖表如下圖所示：
如果數(shù)據(jù)值超出您在colorRange對(duì)象中定義的數(shù)字范圍；圖表顯示空白數(shù)據(jù)圖。針對(duì)超出范圍的數(shù)據(jù)繪制了帶有空白數(shù)據(jù)圖的圖表，如下所示：
請(qǐng)參考下面的代碼：
{
"chart": {
...
},
"rows": {
"row": [{
...
}]
},
"columns": {
"column": [{
...
}]
},
"dataset": [{
"data": [{
...
}]
}],
"colorRange": {
"gradient": "1",
"minValue": "0",
"code": "#2a7faa",
"startLabel": "Not satisfied",
"endLabel": "Love it!"
}
}
為避免出現(xiàn)這種空白數(shù)據(jù)圖，可以為熱圖圖表啟用百分比映射。
地圖按百分比數(shù)據(jù)
使用百分比映射，可以按百分比顯示數(shù)據(jù)值。將mapByPercent屬性的值設(shè)置為1，以為熱圖圖表啟用百分比映射。
請(qǐng)參考下面的代碼：
{
"chart": {
...
},
"rows": {
"row": [{
...
}]
},
"columns": {
"column": [{
...
}]
},
"dataset": [{
"data": [{
"rowid": "JA",
"columnid": "EN",
"value": "3.7"
}, {
...
}]
}],
"colorRange": {
...
}
}
該圖表如下圖所示：
使用百分比映射時(shí)，JSON數(shù)據(jù)中的最低數(shù)據(jù)值被視為下限，并顯示為0％。另一方面，最高數(shù)據(jù)值被視為上限，并顯示為100％。另外，您需要?jiǎng)?chuàng)建顏色范圍，下限為0，上限為100。即使所有數(shù)據(jù)值都在定義的范圍內(nèi)，也可以啟用百分比映射。
在基于類別的熱圖圖表中，如果colorRangeLabel通過data元素提供的屬性（未在colorRange元素中定義）提供類別名稱，則圖表將顯示空白數(shù)據(jù)圖。想要購買FusionCharts Suite XT正版授權(quán)，或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊【咨詢?cè)诰€客服】
QQ交談
在線咨詢
渝公網(wǎng)安備
50010702500608號(hào)
提供CDN加速/云存儲(chǔ)服務(wù)
客服熱線