我的蜘蛛网周围有一个奇怪的圆圈，我该如何解决？答案

【问题标题】：I have a strange circle aroung my spiderweb, how can i fix it?我的蜘蛛网周围有一个奇怪的圆圈，我该如何解决？
【发布时间】：2020-06-25 05:46:01
【问题描述】：

我在 Highcharts 中创建了一个蜘蛛网，但我有一个问题，蜘蛛网周围是一个圆圈。但我不想拥有它。第二件事是，我想将整个 SPiderweb 旋转 30 度，但我不知道如何..

{
   "title":{
      "text":"",
      "style":{
         "fontSize":10,
         "fontFamily":"Arial"
      }
   },
   "chart":{
      "inverted":false,
     "alignTicks":false,
      "polar":true,
      "type":"line",
      "style": {
            "fontFamily": "Arial",
        },
      "annotations":[{
        "shapes":[{
          "strokeWidth":"0px",
        }]
      }]  
   },

   "xAxis":{
      "categories":["Power","O2", "AR","LOX","LIN","LAR"],
      "tickmarkPlacement":"on",
      "startOnTick":true,
      "labels":{
         "enabled":true,
         "fontFamily":"Arial",
         "startAngle":0
      }
   },
   "yAxis":{
      "gridLineInterpolation":"polygon",
      "lineWidth":0,
      "min":-10,
      "max":10,
      "tickInterval":5,
      "title":{
         "text":"",
         "style":{
            "fontSize":12,
            "fontFamily":"Arial"
         }
      },
      "plotOptions":{
        "series":{
          "LineWidth":0,
          "pointStart":0,
          "pointInterval":"interval" 
        }
      },
      "tooltip":{
        "shared":true,
        "pointFormat":"<span style='color:{series.color}'>{series.name}: <b>${point.y:,.0f}</b><br/>"
      },
      "labels":{
         "style":{
            "fontSize":12,
            "fontFamily":"Arial"
         }
      }
   },
      "series":{
         "enableMouseTracking":false,
         "dataLabels":{
            "enabled":true
         }
      },
   "legend":{
      "enabled":true,
      "backgroundColor":"transparent",
      "itemStyle":{
         "fontSize":12,
         "fontWeight":"normal",
         "fontFamily":"Arial",
      }
   },
   "responsive":{
     "rules":[{
       "condition":{
         "maxWidth":500
       },
       "chartOptions":{
         "legend":{
           "align":"center",
           "verticalAlign":"bottom",
           "layout":"horizontal"
         },
         "pane":{
           "size":"70%"
         }
       }
     }]
   },
   "credits":{
      "text":"© ROT"
   }
}

这是我的蜘蛛网代码。 PS：该系列在一个额外的盒子里..（与我的问题无关）

【问题讨论】：

将“linewidth: 0”参数添加到xAxis，这将删除你的圈子

标签： javascript html css highcharts grafana

【解决方案1】：

你的蜘蛛网周围的圆圈可以去掉，请在下面替换：

 xAxis: {
   categories:["Power","O2", "AR","LOX","LIN","LAR"],
   tickmarkPlacement: 'on',
   startOnTick:true,
   labels:{
     enabled:true,
     fontFamily:"Arial",
     startAngle:0
   },
   lineWidth: 0
 },

很遗憾，Highcharts 没有实现“轮换”选项。目前你只能玩 CSS 旋转：

#container {
  transform: rotate(90deg);
}

【讨论】：

如何在我的代码中使用这个“转换”？
嗨@BS1010，容器是我的主div的id，即我正在应用highchart的父div，你可以使用你的。

【解决方案2】：

您可以通过将 xAxis.lineWidth 设置为 0 来移除圆圈。要旋转图表，请使用 startAngle 属性：

pane: {
    ...,
    startAngle: 30
},

xAxis: {
    ...,
    lineWidth: 0
}

现场演示： https://jsfiddle.net/BlackLabel/4ujyt123/1/

API 参考：

https://api.highcharts.com/highcharts/xAxis.lineWidth

https://api.highcharts.com/highcharts/pane.startAngle

【讨论】：