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

标签渲染器具有以下形式：

<?php
   include('database.php');
   if(isset($_POST['addproduct']))
   {
    $prod_name=$_POST['prod_name'];
    $prod_family=$_POST['prod_family'];
    $sur_finish=$_POST['sur_finish'];
    $type=$_POST['type'];
    $size=$_POST['size'];
    $application = implode(" & ",$_POST['application']);

    $image=$_FILES['prod_image']['name'];
    $imgtmp=$_FILES['prod_image']['tmp_name'];
    $location="upload";

    $uploading=move_uploaded_file($imgtmp,"upload/".$image);

    if($uploading)      
    {
    echo "success";
    }
    else
    {
    echo "error".mysqli_error($con);
    }
    $upfile="upload/".$image;       
    $qry = "insert into products values('','$prod_name','$prod_family','$sur_finish','$type','$size','$application','$upfile')";
    $ex=mysqli_query($con,$qry);

    }
 ?>

因此，如果label: function (str, x, y, shape, anchorX, anchorY, useHTML, baseline, className)字符串可能是这样的HTML字符串：

useHTML=true

并应用适当的CSS：

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

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

检查小提琴已更新：http://jsfiddle.net/beaver71/eenjkv5c/

Answer 2

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

        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

是否有可能在高图中使用html制作自定义形状的标签？

2 个答案: