Highcharts - 儀表圖表數據標簽未正確定位

Question

我正在構建一個垂直儀表，並且在應用自定義圖像代替默認標記時遇到問題。

雖然圖像呈現，但它的位置是關閉的。 我似乎無法確切地指出標記的位置，我不確定是否將正確的方法應用於靜態偏移值到'y'屬性。

這是一個小提琴 。

  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/