Highcharts - Stellen Sie das Diagrammdaten-Etikett nicht richtig ein

Question

Ich baue ein vertikales Messgerät und habe Probleme beim Anwenden eines benutzerdefinierten Bildes anstelle des Standard-Markers.

Obwohl das Bild gerendert wird, ist die Platzierung deaktiviert. Ich kann es nicht scheinen, genau zu zeigen, wo der Marker positioniert ist, und ich bin mir nicht sicher, ob das Anwenden eines statischen Versatzwertes auf das Attribut 'y' der richtige Ansatz ist.

Hier ist ein 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>

Würde jede Hilfe dankbar, danke!

Answer 1

Sie sollten die Bildposition über x, y-Eigenschaften anpassen.

 x: 0, 
     y: 30, 

Beispiel: https://jsfiddle.net/ptezqnbf/1/

oder noch besser, verwenden renderer.image und die Position direkt steuern.

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 
     }); 

Beispiel: https://jsfiddle.net/tpp1gdau/1/