跨平台图表控件Anychart教程：使用JavaScript创建热图图表（下）

学习如何使用JavaScript快速创建交互式热图。

AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。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类”部分中，您可以找到这些属性的一些示例，并获得一些想法以应用自己的样式。

在这里，我将修改一个名为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]); } });

这是JavaScript热图图表的最终版本

新的热图比初始图看起来更漂亮，信息量更大，不是吗在我们可以清楚地看到，在考虑的时期内，世界上人类发展的人类发展水平有所提高。阿拉伯国家地区的HDI和东亚及太平洋地区的HDI从“中”提高到“高”。世界上没有一个地区的HDI值达到“非常高”的范围。撒哈拉以南非洲的人类发展指数处于最低水平。人类发展指数最高的两个地区是欧洲和中亚以及拉丁美洲和加勒比地区。

结论

教程已经表明，为 站和应用程序创建交互式JavaScript图表不必太复杂。使用AnyChart库，您可以在几分钟内获得漂亮的数据可视化，然后轻松地根据需要自定义它。

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

想要购买Anychart正版授权的朋友可以咨询官方客服。

标签：