Question

我要求在透明色的ng2圆环图后面添加图像，图像将在颜色后面的圆环图中，而不是超出那个而不是圆环图的中心。是否有可能以程序化的方式进行。它是单个图像。 AnyOne帮助表示赞赏。

Here is  plunker demo: https://plnkr.co/edit/lxwEBXQXseUrE6BsHI9h?p=preview

透明图表：

输出如下：

Answer 1

Highcharts中的背景是一个SVG元素，所以如果你想为它添加图像背景，你应该应用defs模式：

events: {
  render: function() {
    var chart = this,
      renderer = chart.renderer,
      bg = chart.plotBackground;

    var pattern = renderer.createElement('pattern').add(renderer.defs).attr({
      width: 1,
      height: 1,
      id: 'bg-pattern',
      patternContentUnits: 'objectBoundingBox'
    });

    renderer.image('https://avatars3.githubusercontent.com/u/15981345?s=400&v=4', 0, 0, 1, 1).attr({}).add(pattern);

    bg.css({
      color: 'url(#bg-pattern)'
    });
  }
}

可以通过 CSS ：

设置点不透明度

.highcharts-point {
  opacity: 0.5;
}

现场演示： http://jsfiddle.net/kkulig/694gs6qv/

文档参考： https://www.highcharts.com/docs/chart-design-and-style/gradients-shadows-and-patterns

API参考：

是否可以在ng2chart中添加透明色的圆环图后面的图像？

1 个答案: