如何在Anycharts极坐标图表的指定位置添加标记点

需求说明 #

希望在极坐标图表的指定位置（参考图红色标记处）添加标记点，现有尝试代码如下：

现有代码 #

JS代码 #

anychart.onDocumentLoad(function () {
  var data_polar= [],
        polar_bg_colors = [];
      data_polar.push({x: "Sales", value: "75.0", fill: "#f16954", stroke: "#f16954"});
      polar_bg_colors.push("#f16954 0.3");
      data_polar.push({x: "CS", value: "83.22", fill: "#f0d55e", stroke: "#f0d55e"});
      polar_bg_colors.push("#f0d55e 0.3");
      data_polar.push({x: "Dev", value: "67.67", fill: "#84d1f4", stroke: "#84d1f4"});
      polar_bg_colors.push("#84d1f4 0.3");
      data_polar.push({x: "Admin", value: "72.78", fill: "#89b698", stroke: "#89b698"});
      polar_bg_colors.push("#89b698 0.3");
   
      var chart_3 = anychart.polar();
      chart_3.column(data_polar);
      chart_3.sortPointsByX(true);
      chart_3.xGrid().palette(polar_bg_colors);
      chart_3.xScale('ordinal');
      chart_3.yScale().minimum(0);

      var data = [
        {x: 'Sales', value: 40}
      ];

      var series1 = chart_3.line(data);
      series1.closed(false).markers(true);

      chart_3.container("container");
      chart_3.draw();

});

CSS代码 #

html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

HTML代码 #

<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-base.min.js"></script>
<link href="https://cdn.anychart.com/releases/8.11.0/css/anychart-ui.min.css" rel="stylesheet"/>

<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-polar.min.js"></script>
<div id="container"></div>

实现方案 #

完全可以实现指定位置的标记点，推荐两种更直接的方式：

方式一：使用Marker系列（更简洁） #

直接创建marker系列添加标记点，无需依赖line系列，代码修改如下：

// 替换原有line系列代码
var markerData = [
  {x: 'Sales', value: 40},
  // 可按需添加更多标记点，比如{x: 'CS', value: 50}
];
var markerSeries = chart_3.marker(markerData);
// 自定义标记样式
markerSeries.markers()
  .type('circle') // 标记形状，可选circle、square、triangle等
  .size(8) // 标记大小
  .fill('#ff0000') // 填充色
  .stroke('#000', 1); // 边框样式

方式二：优化现有Line系列 #

如果保留line系列，可隐藏线条只显示标记：

var series1 = chart_3.line(data);
series1.closed(false)
       .markers(true)
       .stroke(null); // 隐藏线条，仅保留标记
// 自定义标记样式
series1.markers()
  .type('circle')
  .size(8)
  .fill('#ff0000');

两种方式都能精准在指定x（分类）和value（数值）位置添加标记点，可根据需求调整标记的形状、颜色、大小等样式。

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