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

點擊下載Anychart最新試用版

數(shù)據(jù)可視化任務(wù)

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

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

要使用AnyChart JS Charts解決此數(shù)據(jù)可視化任務(wù)，通常需要以下內(nèi)容：

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

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

方案概述

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

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

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

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

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

現(xiàn)在，設(shè)置一個名稱和meta，其中包含指向每個系列的相應(yīng)圖像的鏈接，如下所示：

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

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

var sizeThreshold = 30;

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

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

第二，傳遞tmp給shapes替換默認(rèn)形狀：

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

第三，創(chuàng)建一個在繪制每個系列點時使用的函數(shù)并獲取當(dāng)前狀態(tài)形狀：

.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']
…
}

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

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

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

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

關(guān)注慧聚IT微信公眾號，獲得產(chǎn)品最新資訊▼▼▼