跨平台图表控件Anychart教程：如何创建JavaScript气泡图（下）

在本教程中，我将教您如何构建自己的交互式JS气泡图并通过自定义实现它。所有示例都将提供完整代码。

AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用，可用于仪表盘、报表、数据分析、统计学、金融等领域。重要推荐：AnyChart已加入在线订购，超值特惠限时抢购！咨询详情>>

Anychart最新试用版

自定义气泡图外观

有很多方法可以自定义我们新制作的数据可视化。我们可以使用CSS来修改HTML元素。但是，AnyChart通过其API附带了各种易于实现和特定于图表的自定义选项。让我们来看看其中的一些。

工具提示

首先，让我们自定义气泡图的工具提示。工具提示是我们将鼠标悬停在数据点上时看到的信息。AnyChart的API允许我们独立自定义工具提示的标题和正文。为了从一个点开始包含一个变量，我们将使用一种特殊的语法：{%variable_name}。

以下代码将影片标题以及其他正确的变量名称添加到工具提示中：

var tooltip = chart.tooltip();tooltip.titleFormat("Title: {%title}");tooltip.format("Year: {%x} nBudget: {%value} nGross: {%size}");

颜色

如前所述，气泡图非常适合可视化三个变量。这可以通过基于第四变量更改点的颜色来进一步扩展。在我们的案例中，我们可以将电影类型可视化为第四类。

为了像使用第四个变量那样自定义颜色，首先，我们需要根据流派将数据集分成不同的系列。我们可以通过使用JavaScript过滤器功能来实现：

var data_sci_fi = data.filter(function(entry) {  return entry.genres === "Sci-Fi/Fantasy";});var data_animation = data.filter(function(entry) {  return entry.genres === "Animation";});var data_other = data.filter(function(entry) {  return entry.genres === "Other";});

现在我们有了不同的系列，我们可以自定义每个外观。

以下代码更改了每个系列的笔触和填充，使其不同。

var series1 = chart.bubble(data_sci_fi);series1.normal().fill("#74A4BC", 0.3);series1.hovered().fill("#C3423F", 0.3);series1.selected().fill("#C3423F", 0.3);series1.normal().stroke("#74A4BC", 1);series1.hovered().stroke("#8E312E", 2);series1.selected().stroke("#8E312E", 2);var series2 = chart.bubble(data_animation);series2.normal().fill("#FACD26", 0.3);series2.hovered().fill("#C3423F", 0.3);series2.selected().fill("#C3423F", 0.3);series2.normal().stroke("#FACD26", 1);series2.hovered().stroke("#8E312E", 2);series2.selected().stroke("#8E312E", 2);var series3 = chart.bubble(data_other);series3.normal().fill("#7DC95E", 0.3);series3.hovered().fill("#C3423F", 0.3);series3.selected().fill("#C3423F", 0.3);series3.normal().stroke("#7DC95E", 1);series3.hovered().stroke("#8E312E", 2);series3.selected().stroke("#8E312E", 2);

气泡大小

制作气泡图时要了解如何自定义的另一个重要方面是设置最小和最大气泡大小。在我们的数据集中，最大和最小点之间存在很大的差异。我们遇到的另一个问题是，其中有些点太大了，无法在可视化中占主导地位。

我们可以使用以下代码更改这些最小值和最大值：

chart.minBubbleSize("2%");chart.maxBubbleSize("12%");

气泡图显示了收入最高的电影预算增长的明显趋势，并且预期也很高，而新电影也能赚更多钱。然而，更有趣的是，科幻/幻想和动画显然在该列表中占主导地位，泰坦尼克号在类型上是离群值！

结论

如我所展示的，借助正确的JavaScript图表库（例如AnyChart JS）来构建气泡图并不是一件容易的事。它的API确实很容易使数据可视化变得更加有趣和引人入胜。专用文档将帮助您快速找出可能的方式。感兴趣的朋友欢迎下载Anychart试用版免费体验。

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

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

更多精彩内容，欢迎关注下方的微信公众号，及时获取产品最新资讯▼▼▼

标签：

来源：慧都