AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創(chuàng)建跨瀏覽器和跨平臺(tái)的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報(bào)表、數(shù)據(jù)分析、統(tǒng)計(jì)學(xué)、金融等領(lǐng)域。重要推薦：

點(diǎn)擊下載Anychart最新試用版

自定義氣泡圖外觀

有很多方法可以自定義我們新制作的數(shù)據(jù)可視化。我們可以使用CSS來(lái)修改HTML元素。但是，AnyChart通過(guò)其API附帶了各種易于實(shí)現(xiàn)和特定于圖表的自定義選項(xiàng)。讓我們來(lái)看看其中的一些。

工具提示

首先，讓我們自定義氣泡圖的工具提示。工具提示是我們將鼠標(biāo)懸停在數(shù)據(jù)點(diǎn)上時(shí)看到的信息。AnyChart的API允許我們獨(dú)立自定義工具提示的標(biāo)題和正文。為了從一個(gè)點(diǎn)開始包含一個(gè)變量，我們將使用一種特殊的語(yǔ)法：{%variable_name}。

以下代碼將影片標(biāo)題以及其他正確的變量名稱添加到工具提示中：

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

顏色

如前所述，氣泡圖非常適合可視化三個(gè)變量。這可以通過(guò)基于第四變量更改點(diǎn)的顏色來(lái)進(jìn)一步擴(kuò)展。在我們的案例中，我們可以將電影類型可視化為第四類。

為了像使用第四個(gè)變量那樣自定義顏色，首先，我們需要根據(jù)流派將數(shù)據(jù)集分成不同的系列。我們可以通過(guò)使用JavaScript過(guò)濾器功能來(lái)實(shí)現(xiàn)：

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";
});

現(xiàn)在我們有了不同的系列，我們可以自定義每個(gè)外觀。

以下代碼更改了每個(gè)系列的筆觸和填充，使其不同。

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);

氣泡大小

制作氣泡圖時(shí)要了解如何自定義的另一個(gè)重要方面是設(shè)置最小和最大氣泡大小。在我們的數(shù)據(jù)集中，最大和最小點(diǎn)之間存在很大的差異。我們遇到的另一個(gè)問(wèn)題是，其中有些點(diǎn)太大了，無(wú)法在可視化中占主導(dǎo)地位。

我們可以使用以下代碼更改這些最小值和最大值：

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

氣泡圖顯示了收入最高的電影預(yù)算增長(zhǎng)的明顯趨勢(shì)，并且預(yù)期也很高，而新電影也能賺更多錢。然而，更有趣的是，科幻/幻想和動(dòng)畫顯然在該列表中占主導(dǎo)地位，泰坦尼克號(hào)在類型上是離群值！

結(jié)論

如我所展示的，借助正確的JavaScript圖表庫(kù)（例如AnyChart JS）來(lái)構(gòu)建氣泡圖并不是一件容易的事。它的API確實(shí)很容易使數(shù)據(jù)可視化變得更加有趣和引人入勝。專用文檔將幫助您快速找出可能的方式。感興趣的朋友歡迎下載Anychart試用版免費(fèi)體驗(yàn)。

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

想要購(gòu)買Anychart正版授權(quán)的朋友可以

更多精彩內(nèi)容，歡迎關(guān)注下方的微信公眾號(hào)，及時(shí)獲取產(chǎn)品最新資訊▼▼▼