2017-08-31 58 views
2

我有splineweb圖表,劇情圖在特定的值。網格線interploation用作圓。在這種情況下,默認情況下,提供的標籤顯示的距離圖線(圖表的左上角)很遠。蜘蛛網圖圓形網格線插值:標籤看起來離Plotline很遠

我怎樣才能始終在中心或特定位置的情節線圈顯示標籤,而無需手動計算x和y點。

參見例如:http://jsfiddle.net/2862pqma/4/

Highcharts.chart('container', { 
 

 
    chart: { 
 
    polar: true, 
 
    type: 'line' 
 
    }, 
 

 
    title: { 
 
    text: 'Budget vs spending', 
 
    x: -80 
 
    }, 
 

 
    pane: { 
 
    size: '80%' 
 
    }, 
 

 
    xAxis: { 
 
    categories: ['Sales', 'Marketing', 'Development', 'Customer Support', 
 
     'Information Technology', 'Administration' 
 
    ], 
 
    tickmarkPlacement: 'on', 
 
    lineWidth: 0 
 
    }, 
 

 
    yAxis: { 
 
    gridLineInterpolation: 'circle', 
 
    lineWidth: 0, 
 
    min: 0, 
 
    plotLines: [{ 
 
     value: 35000, 
 
     width: 2, 
 
     dashStyle: "Solid", 
 
     color: "red", 
 
     label: { 
 
     text: "Line Marker", 
 
     style: { 
 
      color: "red" 
 
     } 
 
     } 
 
    }] 
 
    }, 
 

 
    tooltip: { 
 
    shared: true, 
 
    pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>' 
 
    }, 
 

 
    legend: { 
 
    align: 'right', 
 
    verticalAlign: 'top', 
 
    y: 70, 
 
    layout: 'vertical' 
 
    }, 
 

 
    series: [{ 
 
    name: 'Allocated Budget', 
 
    data: [43000, 19000, 60000, 35000, 17000, 10000], 
 
    pointPlacement: 'on' 
 
    }, ] 
 

 
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/highcharts-more.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>

回答

0

不幸的是,你需要計算在極座標圖標籤位置,雖然這並不難。使用Axis.toPixels函數將軸值更改爲像素,並將它們用作標籤的xy位置。看看下面的例子。

API參考:
http://api.highcharts.com/highcharts/Axis.toPixels
http://api.highcharts.com/highcharts/chart.events.load
http://api.highcharts.com/highcharts/xAxis.plotLines.label.x
http://api.highcharts.com/highcharts/xAxis.plotLines.label.y

實施例:
http://jsfiddle.net/z7ya2r9y/