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号
客服热线