javascript - Highcharts 5 - 外部带有圆圈的雷达图

Question

我在样式模式下使用 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 问题。

Answer 1

在样式模式下，lineWidth 属性被 css 笔划宽度替换。

如果你想将轴线宽度设置为0，那么你必须使用css作为轴线类(默认为1)

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

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