我們準備分享一個新的高級JS（HTML5）數據可視化教程，展示了我們的JavaScript圖表庫的強大功能和靈活性  。今天的挑戰是使用AnyChart將圖像添加到堆積柱形圖。

點擊下載Anychart最新試用版

數據可視化任務

以下是我們的客戶前幾天向我們尋求幫助的問題：

如何將圖像放在堆積條形圖/柱形圖中的系列之上？

要使用AnyChart JS Charts解決此數據可視化任務，通常需要以下內容：

●使用我們的  JS Charts API中的方法將X和Y值轉換為像素

●進行一些數學計算，以您希望的方式顯示堆疊圖表系列中的圖像。

方案概述

首先要注意的是圖表本身 - 構建堆積柱形圖（或者，如果您需要水平條而不是列，則構建堆積條形圖）。

然后，您需要創建一個覆蓋默認圖形的函數。如果某個條/列的寬度和高度足夠大，則會在那里放置一個合適的圖像。當條/列大小改變時，圖像大小將按比例改變。我們現在就告訴你如何。

第一：將圖像添加到堆積柱形圖

在使主腳本工作并使用圖像提供交互式堆積柱形圖的一個很好的示例之前，以HTML格式緩存所需的圖像：

<img src=" 
<img src=" 
<img src="

現在，設置一個名稱和meta，其中包含指向每個系列的相應圖像的鏈接，如下所示：

series1
    .name('AnyChart')
    .meta('image', '//cdn.anychart.com/ts/icons/anychart.svg');

另外，指定圖像大小的必要限制，以像素為單位：

var sizeThreshold = 30;

要將圖像添加到堆積圖表的每個點，請定義一個將覆蓋默認圖形的特殊函數。首先，在函數體中創建一個變量，該變量需要包含形狀數組和用于繪制圖像的新形狀：

var tmp = series.rendering().shapes();
    tmp.push({
      name: 'image',
      shapeType: 'path',
      fillName: 'fill',
      canBeHoveredSelected: true,
      strokeName: 'stroke',
      isHatchFill: false
    });

第二，傳遞tmp給shapes替換默認形狀：

series.rendering()
      .shapes(tmp)
      .needsZero(true)

第三，創建一個在繪制每個系列點時使用的函數并獲取當前狀態形狀：

.point(function() {
      // get shapes group
      var shapes = this.getShapesGroup(this.pointState);

第四，計算X軸上的左右值：

var leftX = this.x - this.pointWidth / 2;var rightX = leftX + this.pointWidth;

第五，如果有足夠的空間，繪制堆積的列，然后繪制圖像：

shapes['path']
        .clear()
        .moveTo(leftX, this.zero)
        .lineTo(leftX, this.value)
        .lineTo(rightX, this.value)
        .lineTo(rightX, this.zero)
        .close();if (Math.abs(this.zero - this.value) >= sizeThreshold) {
 shapes['image']
…
}

最后，重復操作以使圖像在懸停時正常工作：

shapes = this.getShapesGroup(1);
        shapes['image']

您可以在AnyChart Playground上查看它，并再次看到任何數據可視化任務都可以在AnyChart JS圖表庫的幫助下解決。

想要購買AnyChart正版授權的朋友可以。

關注慧聚IT微信公眾號，獲得產品最新資訊▼▼▼