半岛权威十大直营(官方)网站

我们准备分享一个新的高级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微信公众号，获得产品最新资讯▼▼▼