AnyChart是基于JavaScript (HTML5) 的圖表控件。使用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正版授權的朋友可以

更多精彩內容，歡迎關注下方的微信公眾號，及時獲取產品最新資訊▼▼▼