是否可以在 highcharts 中使用 html 自定义形状标签 w/o？

Question

我有动画移动标签

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/ 我需要这个标签的形状像一个箭头：

Answer 1

标签渲染器具有这种形式：

label: function (str, x, y, shape, anchorX, anchorY, useHTML, baseline, className)

所以如果 useHTML=true 字符串可以是这样的 HTML 字符串：

var txt = '<div class="arrow_box">'+(66).toFixed(2)+'</div>';

并应用适当的 CSS:

.arrow_box {
  color: #FFFFFF;
  position: relative;
  background: rgba(0, 0, 0, 0.75);
  border: 0px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 5px;
  padding-right: 5px;
  width: 50px;
}
.arrow_box:after, .arrow_box:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(255, 0, 0, 0)
    border-right-color: rgba(0, 0, 0, 0.75);
    border-width: 20px;
    margin-top: -20px;
}
.arrow_box:before {
    border-color: rgba(0, 255, 0, 0);
    border-right-color: rgba(0, 0, 0, 0.75);
    border-width: 20px;
    margin-top: -20px;
}

您可以获得一个箭头框作为标签。

检查 fiddle 更新：http://jsfiddle.net/beaver71/eenjkv5c/

Answer 2

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

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

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

        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 自定义形状标签 w/o？

Is it possible to make custom shaped label w/o use of html in highcharts?

highcharts

highstock