Highcharts极坐标图：交叉区域系列应用渐变色相关问题咨询

调整说明 #

针对你要实现的两个效果，只需要对现有配置做3处修改即可：

• 替换系列类型：将彩色区域系列的type从area改为areaspline，即可直接获得轮廓线两端平滑弧度的效果，和你预期的spline类表现一致
• 标记点填充匹配：在plotOptions.series.marker中添加fillColor: null配置，此时标记点会自动继承对应数据点定义的color作为填充色
• 可选配置：如果需要更统一的标记点样式，可以额外给marker加lineWidth: 0去掉标记点默认的白色描边

修改后的核心配置片段 #

// plotOptions部分调整
"plotOptions": {
  "series": {
    "marker": {
      "radius": 2.5,
      "fillColor": null, // 新增：继承点的color作为填充色
      "lineWidth": 0 // 可选：去掉marker默认描边
    },
    "states": {
      "hover": {
        "enabled": false
      },
      "inactive": {
        "opacity": 1
      }
    }
  },
  "area": {
    // 原有径向渐变配置保持不变
    "color": {
      "radialGradient": {
        "cx": 0.45,
        "cy": 0.5,
        "r": 1
      },
      "stops": [
        [0, "#DFA124"],
        [0.25, "#AF9D3F"],
        [0.5, "#5A9772"],
        [1, "#229595"]
      ]
    },
    "dataLabels": {
      "enabled": false
    },
  }
},
// 系列部分调整
"series": [
  // 第一个灰色背景系列保持不变
  {
    "showInLegend": false,
    "data": [
      { "y": 36, "color": "#AF9D3F" },
      { "y": 64, "color": "#229595" },
      { "y": 33, "color": "#AF9D3F" }
    ],
    "pointPlacement": "on",
    "type": "areaspline" // 把原来的area改为areaspline
  }
]

效果说明 #

修改后即可完全匹配你的需求：

1. 所有标记点填充色和对应点自定义的颜色完全一致
2. 彩色区域的轮廓线为平滑曲线，带有你需要的轻微弧度
3. 原有径向渐变填充效果完全保留，不会受系列类型修改的影响

内容的提问来源于stack exchange，提问作者PGKK