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 stroke-width替换。

如果要将轴线宽设置为0，则必须将css用于轴线类（默认情况下为1）

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

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

Answer 2

或者可以使用yaxis作为Circle：

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

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

Highcharts 5 - 外面有圆圈的雷达图表

2 个答案: