Highcharts - Gauge圖表數據標籤沒有正確定位

我正在構建一個垂直測量儀，並且在應用自定義圖像代替默認標記時出現問題。Highcharts - Gauge圖表數據標籤沒有正確定位

儘管圖像呈現，它的位置關閉。我似乎無法確切指出標記所在的位置，而且我不確定將「靜態偏移」值應用於「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>

希望得到任何幫助，謝謝！

來源

2016-12-25 RizJa

，我認爲你將不得不採取的賬戶圖像高度的精確放置標記的點。你正在渲染的圖像是40 * 40，頂部和底部有一定的間距，所以你的標記提示應該用一些靜態的y值進行調整。 – Deep

您應該通過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/

來源

2016-12-27 15:55:11 morganfree

Highcharts - Gauge圖表數據標籤沒有正確定位

回答

相關問題