是否可以在highcharts中不使用html来制作自定义形状的标签? [英] Is it possible to make custom shaped label w/o use of html in highcharts?

问题描述

我有动感的动态标签

plotbandLabel.animate({
    y : yAxis.toPixels(y) - labelOffset
}, {
    duration : 500,
    step : function () {
        this.attr({
            text : yAxis.toValue(this.y + labelOffset).toFixed(2),
            zIndex : 999999999
        })
    },
    complete : function () {
        this.attr({
            text : y.toFixed(2),
            zIndex : 999999999
        })
    }
});

以下是完整示例: http://jsfiddle.net/7yo3nht4/ 我需要将此标签的形状像箭头一样:

Here is the full example: http://jsfiddle.net/7yo3nht4/ And I need this label to be shaped like an arrow:

推荐答案

如果在renderer.label中省略fill属性，则不会创建标签框:

If you omit fill property in renderer.label the label's box won't be created:

        plotbandLabel = this.renderer.label(
            (...)
          )
          .css({
            (...)
          }).attr({
            (...)
            //fill: 'red' // no fill
          })
          .add();

然后，您可以创建一个自定义路径并将其附加到plotbandLabel SVG组:

Then you can create a custom path and append it to the plotbandLabel SVG group:

        this.renderer.path(['m', -10, 15, 'l', 15, -15, 'l', 50, 0, 'l', 0, 30, 'l', -50, 0, 'l', -15, -15, 'z']).attr({
          fill: 'rgba(0, 0, 0, 0.75)'
        }).add(plotbandLabel);

实时演示: http://jsfiddle.net/kkulig/hqyfpsw4/

API参考: https://api .highcharts.com/class-reference/Highcharts.SVGRenderer#path

这篇关于是否可以在highcharts中不使用html来制作自定义形状的标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！