高图5-外圆雷达图

Question

我在样式模式下使用高图集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/

然而，如果我运行相同的配置，在正常模式下使用的高图表之前，我没有得到的圆圈外。http://jsfiddle.net/fex0hnoy/

任何建议或解决方案欢迎，这可能是一个高图表5期。

Answer 1

在样式模式中，lineWidth属性被css笔画宽度所取代。

如果要将轴线宽设置为0，则必须为轴行类使用css (默认为1)。

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

示例：http://jsfiddle.net/8pv79gy9/1/

Answer 2

也可以使用yaxis作为圆圈：

 "yAxis": {
  "title": {},
  "gridLineInterpolation": "circle",
  "lineWidth": 0
  },

http://jsfiddle.net/8pv79gy9/2/