2016-11-25 139 views
0

在風格模式下使用Highcharts 5時,當我在此模式下創建雷達圖表時,我會在圖表的外部形成一個圓圈。Highcharts 5 - 帶圓形的外部圓形雷達圖表

樣式化模式示例

<script src="https://code.highcharts.com/js/highcharts.js"></script> 
<script src="https://code.highcharts.com/js/highcharts-more.js"></script> 
<script src="https://code.highcharts.com/js/modules/exporting.js"></script> 
<link rel="stylesheet" href="http://code.highcharts.com/css/highcharts.css"> 


<div id="container" style="min-width: 310px; max-width: 400px; height: 400px; margin: 0 auto"></div> 
$(function() { 

Highcharts.chart('container', { 


"chart": { 
    "polar": true, 
}, 
"exporting": { 
    "enabled": true, 
    "filename": "bar", 
    "url": "http://export.highcharts.com", 
    "chartOptions": { 
    "chart": { 
     "backgroundColor": "white" 
    } 
    } 
}, 
"plotOptions": { 
    "pie": { 
    "dataLabels": { 
     "enabled": true 
    } 
    } 
}, 

"series": [{ 
    "data": [ 
    [1379790000], 
    [1330780000], 
    [324897000], 
    [260581000], 
    [206927000], 
    [194772000], 
    [86987000], 
    [161401000], 
    [146727405], 
    [126693000] 
    ], 

    "id": "series-7" 
}], 
"xAxis": { 
    "categories": ["China", "India", "United States", "Indonesia", "Brazil", "Pakistan", "Nigeria", "Bangladesh", "Russia", "Japan"], 
    "title": {}, 
    "labels": { 
    "rotation": 0, 
    "enabled": true 
    }, 
    "lineWidth": 0, 
    "tickmarkPlacement": "on" 
}, 
"yAxis": { 
    "title": {}, 
    "gridLineInterpolation": "polygon", 
    "lineWidth": 0 
}, 
"title": { 
    "text": "Population of Countries" 
}, 
"subtitle": { 
    "text": "Bar Chart" 
}, 
"loading": false 
}); 
}); 

http://jsfiddle.net/8pv79gy9/

但是如果我在運行使用Highcharts先前我沒有得到圓輪外部的正常模式中的相同的配置。 http://jsfiddle.net/fex0hnoy/

任何建議或解決方案的歡迎,這可能是一個Highcharts 5問題。

回答

1

在樣式模式中,lineWidth屬性由css stroke-width替換。

如果要軸線線寬設置爲0,則必須使用用於軸線類的CSS(默認爲1)

.highcharts-xaxis .highcharts-axis-line { 
    stroke-width: 0; 
} 

例如:http://jsfiddle.net/8pv79gy9/1/