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最新版
熱圖圖是一種專用圖，它使用顏色表示表中的數據值。當您需要繪制大型和復雜數據時，您會發現它最有用。
熱圖圖表的基礎
您可以使用熱圖來繪制數據，例如員工出勤記錄，周期表，跟蹤股市投資，比較不同公司的業績等。您可以為不同級別的數據設置不同的顏色。例如，如果使用熱圖圖表繪制員工出勤記錄，則可以使用百分比百分比值來表示紅色，黃色，藍色和綠色（例如，紅色，黃色，藍色和綠色），分別表示不良，平均，良好和優良等級。繪制圖表后，您將可以輕松地區分四個等級。
熱圖圖表特點
使用熱圖圖表，您可以：
-
以表格格式排列數據，其中包含有限數量的行和列。
-
繪制數字或非數字數據，或同時繪制兩者。
-
使用純色或漸變表示數據值內的不同范圍。
-
使用交互式圖例顯示或隱藏數據圖。
-
隱藏任何超出定義的顏色范圍限制的數據。
-
使用兩種不同類型的圖例-圖標圖例和漸變圖例。
熱圖圖表類型
使用FusionCharts Suite XT，您可以構建兩種類型的熱圖圖表。使用數字熱圖來繪制數字數據，使用基于類別的熱圖來繪制非數字數據。這些圖表如下圖所示：
數字熱圖圖表
基于類別的熱圖圖表
在熱圖圖表傳奇
如前所述，您可以在熱圖圖表中使用兩種不同類型的圖例：
梯度傳說
圖標圖例
創建數字熱圖圖表
-
使用以下屬性創建簡單的數字熱圖圖表：
-
使用rowID屬性指定必須在其中輸入數據的行的唯一ID 。
-
使用columnID屬性指定必須在其中輸入數據的列的唯一ID 。
-
使用value屬性指定要在單元格中輸入的數據值。
-
指定在所述數據圖的左上，右上，左下，以及右下的角將被顯示的標簽，使用tlLabel，trLabel，blLabel，和brLabel，分別屬性。
-
使用code屬性，為代表特定范圍的顏色指定十六進制代碼。
-
使用minValue屬性指定可以在圖表上繪制的最小值。
-
使用maxValue屬性指定可以在圖表上繪制的最大值。
使用以下數據來構建圖表：
使用以下數據對不良，平均或良好評級進行分類：
該圖表如下圖所示：
定義的行和列的順序
在上面給出的圖表中，您可以看到該圖表會根據為數據對象定義行和列的順序自動確定行和列的順序。因此，圖表顯示Samsung Galaxy S5在第一行，HTC One (M8)第二行，依此類推。
但是，還有另一種方法可以繪制基于數字的熱圖圖表，您可以在其中預定義行和列的順序。完成此操作后，您可以通過數據對象以任何順序提供數據。圖表將按照您預先定義的順序顯示它們。
使用以下屬性預定義行和列的順序：
-
使用id屬性為數據項定義唯一ID 。
-
使用label屬性為數據項定義標簽。
注意：row定義行條目時，將上述屬性與對象一起使用，定義列條目時，將上述屬性與對象一起使用column。
請參考下面的代碼：
{
"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"
}]
}]
}
該圖表如下圖所示：
在以上數據中，該color屬性存在于兩個數據元素中，并為圖表的前兩個單元格應用了不同的顏色。這兩種顏色與colorRange元素中定義的顏色不同。您還可以使用alpha帶有data對象的屬性來控制單元格的透明度。
創建基于類別的熱圖圖表
您可以通過定義幾個顏色類別或范圍來進行基于類別的映射，并為單元格設置特定的顏色類別。您無需將數字值映射到值范圍。而是使用顏色范圍來映射具有顏色類別的單元格。
使用以下屬性創建基于類別的熱圖圖表：
-
將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正版授權，或了解更多產品信息請點擊
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自：
金喜正規買球 
13次
相關產品
正式授權
最新文章 
金喜正規買球相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線