javascript - Highcharts - 仪表图表数据标签定位不正确

Question

我正在构建垂直仪表，但在应用自定义图像代替默认标记时遇到问题。

虽然图像呈现，但它的位置是关闭的。我似乎无法让它准确指向标记所在的位置，而且我不确定将静态偏移值应用于“y”属性是否是正确的方法。

这是一个 fiddle .

        var chart = new Highcharts.Chart({

            chart: {
                renderTo: 'container',
                type: 'column',
                marginBottom: 25,
                marginTop: 70,
                marginLeft: 65,
                marginRight: 10,
            },
            xAxis: {
                categories: ['One'],
                lineColor: 'white',
                labels: {
                    enabled: false
                },
                tickLength: 0,
                min: 0,
                max: 2
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    animation: false,
                    borderWidth: 0,
                }
            },
            yAxis: {
                min: 0,
                max: 9026,
                tickInterval: 9026,
                tickLength: 0,
                tickWidth: 0,
                tickColor: '#C0C0C0',
                gridLineColor: '#C0C0C0',
                gridLineWidth: 0,
                minorTickInterval: 25,
                minorTickWidth: 0,
                minorTickLength: 0,
                minorGridLineWidth: 0,
                title: null,
                labels: {
                    formatter: function () {
                        if (this.isFirst || this.isLast) {
                            return this.value;
                        }
                    },
                    x: 0
                },
            },
            legend: {
                enabled: false
            },
            series: [
            {
                data: [4513],
                color: {
                    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
                    stops: [
                        [0, 'red'],
                        [1, 'orange']
                    ]
                }
            },
            {
                data: [4513],
                color: {
                    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
                    stops: [
                        [0, 'orange'],
                        [1, 'green']
                    ]
                }
            },
            {
                type: 'scatter',
                data: [3120],
                marker: {
                    enabled: true,
                    symbol: 'circle'
                },
                dataLabels: {
                    useHTML: true,
                    formatter: function () {

                        return '<img width="40px" height="40px"  src="http://icongal.com/gallery/image/57585/small_arrow_black_monotone_left.png" />'
                    },
                    enabled: true,
                    align: 'right',
                    x: -3,
                    y: 2,
                    overflow: "justify"
                }
            }
            ]

        });

    

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width: 178px; height: 242px;"></div>

非常感谢任何帮助，谢谢!

Answer 1

您应该通过 x, y 属性调整图像位置。

      x: 0,
      y: 30,

示例:https://jsfiddle.net/ptezqnbf/1/

或者更好，使用 renderer.image并直接控制位置。

    function renderImage() {
      var chart = this,
        point = chart.get('point'),
        imgWidth = 40,
        imgHeight = 40;

      if (!chart.dataLabelImg) {
        chart.dataLabelImg = this.renderer.image('http://icongal.com/gallery/image/57585/small_arrow_black_monotone_left.png', -1000, -1000, imgWidth, imgHeight).add(point.series.dataLabelsGroup);
      }

      chart.dataLabelImg.attr({
        x: point.graphic.x + (imgWidth - 15) / 2,
        y: point.graphic.y - (imgHeight - 10) / 2
      });

示例:https://jsfiddle.net/tpp1gdau/1/