ハイチャート - ゲージチャートのデータラベルが正しく配置されていない

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/