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

點擊下載Anychart最新試用版

自定義氣泡圖外觀

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

工具提示

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

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

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

顏色

如前所述，氣泡圖非常適合可視化三個變量。這可以通過基于第四變量更改點的顏色來進一步擴展。在我們的案例中，我們可以將電影類型可視化為第四類。

為了像使用第四個變量那樣自定義顏色，首先，我們需要根據(jù)流派將數(shù)據(jù)集分成不同的系列。我們可以通過使用JavaScript過濾器功能來實現(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)在我們有了不同的系列，我們可以自定義每個外觀。

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

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è)置最小和最大氣泡大小。在我們的數(shù)據(jù)集中，最大和最小點之間存在很大的差異。我們遇到的另一個問題是，其中有些點太大了，無法在可視化中占主導(dǎo)地位。

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

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

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

結(jié)論

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

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

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

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