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

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

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

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

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

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

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

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

方案概述

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

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

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

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

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

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

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

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

var sizeThreshold = 30;

要將圖像添加到堆積圖表的每個(gè)點(diǎn)，請(qǐng)定義一個(gè)將覆蓋默認(rèn)圖形的特殊函數(shù)。首先，在函數(shù)體中創(chuàng)建一個(gè)變量，該變量需要包含形狀數(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)建一個(gè)在繪制每個(gè)系列點(diǎn)時(shí)使用的函數(shù)并獲取當(dāng)前狀態(tài)形狀：

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

第四，計(jì)算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ù)操作以使圖像在懸停時(shí)正常工作：

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

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

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

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