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

时间:2017-11-13 16:58:02

标签: angular highcharts chart.js ng2-charts angular-animations

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

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

透明图表:

enter image description here 输出如下:enter image description here

1 个答案:

答案 0 :(得分:0)

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参考: