请问下有方法可以在AASeriesElement设置markerSymbolStyle吗

[MakaBaka976]

我现在有两组数据，我想要一组是实心，一组是空心，应该怎么做
我看好像只能在model中统一设置 markerSymbolStyle，然后在AASeriesElement中的marker 中好像只能设置数据点的形状

[AAChartModel]

如下配置代码:

Highcharts.chart('container', {
  chart: {
    type: 'line'
  },
  title: {
    text: '实心与空心折线图示例'
  },
  xAxis: {
    categories: ['一月', '二月', '三月', '四月', '五月']
  },
  series: [{
    name: '实心数据',
    data: [29, 71, 106, 129, 144],
    marker: {
      symbol: 'circle',
      lineWidth: 1,
      lineColor: '#0071A7',
      fillColor: '#0071A7'  // 实心
    },
    color: '#0071A7'
  }, {
    name: '空心数据',
    data: [83, 78, 98, 93, 106],
    marker: {
      symbol: 'circle',
      lineWidth: 2,
      lineColor: '#FF404E',
      fillColor: '#ffffff'  // 空心
    },
    color: '#FF404E'
  }]
});

最终📊图表效果:

[AAChartModel]

在线代码编辑器:

• https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-allowpointselect-line/

将以上配置代码复制粘贴到编辑器中, 即可在线测试查看图表效果.

[AAChartModel]

你想在折线图（line）中让一组数据点是实心圆点，另一组是空心圆点，这在 Highcharts 里非常常见，也很容易实现。

---

✅ 实现方法

在 Highcharts 中，每个系列（series）的数据点外观可以通过 marker 属性控制。
你可以分别为两组数据设置：

• 实心圆点：fillColor 与 lineColor 一样。
• 空心圆点：fillColor: '#ffffff'（白色），但 lineColor 设置为实线颜色。

---

🌈 示例代码

Highcharts.chart('container', {
  chart: {
    type: 'line'
  },
  title: {
    text: '实心与空心折线图示例'
  },
  xAxis: {
    categories: ['一月', '二月', '三月', '四月', '五月']
  },
  series: [{
    name: '实心数据',
    data: [29, 71, 106, 129, 144],
    marker: {
      symbol: 'circle',
      lineWidth: 1,
      lineColor: '#0071A7',
      fillColor: '#0071A7'  // 实心
    },
    color: '#0071A7'
  }, {
    name: '空心数据',
    data: [83, 78, 98, 93, 106],
    marker: {
      symbol: 'circle',
      lineWidth: 2,
      lineColor: '#FF404E',
      fillColor: '#ffffff'  // 空心
    },
    color: '#FF404E'
  }]
});

---

🔍 关键点解释（来自 Highcharts API）

• [series.line.marker](https://api.highcharts.com/highcharts/series.line.marker) 控制每个点的外观。

  • fillColor: 点的填充颜色。
  • lineColor: 点边框颜色。
  • lineWidth: 点边框线宽。
  • symbol: 点的形状（可选 'circle', 'square', 'diamond', 'triangle', 'triangle-down' 等）。

---

💡 进阶技巧

如果你想要空心点在鼠标悬浮时变成实心，可以用 states.hover.marker：

marker: {
  fillColor: '#ffffff',
  lineColor: '#FF404E',
  lineWidth: 2,
  states: {
    hover: {
      fillColor: '#FF404E'
    }
  }
}

---

PS:

以上内容, 由我整理自在线 AI 工具.

[MakaBaka976]

这种方法我之前试过了，因为要呈现上面图片的效果，让数据点在不同的范围显示不同的颜色，所以我使用 zones 来设.

但是如果像上面的那样使用 lineColor, fillColor, lineWidth 来设置实心圆和空心圆的话，会导致我所有的数据点都变成一个颜色了.

下面是我目前的图表配置代码:

val aaChartModel = AAChartModel()
    .chartType(AAChartType.Scatter)
//            .markerRadius(5f)
//            .markerSymbol(AAChartSymbolType.Circle)
    .colorsTheme(arrayOf("#12DE8C","#12DE8C","#12DE8C","#12DE8C"))
    .markerSymbolStyle(AAChartSymbolStyleType.Normal)
    .categories(arrayOf("06-07", "06-08", "06-09", "06-10", "06-11", "06-12", "06-13"))
    .series(arrayOf(
        AASeriesElement()
        //                    .marker(AAMarker().apply {
        //                        radius(6f)
        //                        symbol = AAChartSymbolType.Circle.value
        //                        fillColor = "#ffffff"
        //                        lineWidth = 1
        //                        lineColor = "#000000"
        //                    })
            .name("饱腹")
            .data(arrayOf(8.7, 9.1, arrayOf<Any?>(null), 6, 9.3, 7.6, arrayOf<Any?>(null) ))
            .zones(arrayOf(
                AAZonesElement()
                    .value(3.9)
                    .color("#12DE8C"),
                AAZonesElement()
                    .value(7.8)
                    .color("#5EA2FE"),
                AAZonesElement()
                    .color("#FF3F36")
            )),
        AASeriesElement()
        //                    .marker(AAMarker().apply {
        //                        radius(6f)
        //                        symbol = AAChartSymbolType.Square.value
        //                        AAChartSymbolStyleType.Normal
        //                    })
            .name("空腹")
            .data(arrayOf(arrayOf<Any?>(null), 4.8, 5.1,arrayOf<Any?>(null), 2.6, 3.5, 3.1 ))
            .zones(arrayOf(
                AAZonesElement()
                    .value(3.9)
                    .color("#12DE8C"),
                AAZonesElement()
                    .value(6.1)
                    .color("#5EA2FE"),
                AAZonesElement()
                    .color("#FF3F36")
            )),
    )
    )

binding.chartView.aa_drawChartWithChartModel(aaChartModel)

[AAChartModel]

🎨 如下配置图表示例:

// 🌊 生成平滑波浪数据
function generateWaveData(amplitude, phase, step, count, noise = 0) {
  const data = [];
  for (let i = 0; i < count; i++) {
    const y = amplitude * Math.sin((i * step) + phase) + 120; // 平移到正数区间
    const noisyY = y + (Math.random() - 0.5) * noise;
    data.push(parseFloat(noisyY.toFixed(2)));
  }
  return data;
}


// 🌈 色系分区
const zones = [
  {
    value: 80,
    color: '#25547c', 
  },
  {
    value: 110,
    color: '#1e90ff', 
  },
  {
    value: 140,
    color: '#ffd066', 
  },
  {
    value: 170,
    color: '#04d69f', 
  },
  {
    color: '#ef476f', 
  },
];

Highcharts.chart('container', {
  chart: {
    type: 'line',

  },
  title: {
    text: '⚡️高饱和度波浪图 — 实心与空心 Marker 对比',
  },

  legend: {
    align: 'center',
  },
  tooltip: {
    shared: true,
    valueDecimals: 2,
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
    style: { color: '#fff' }
  },
 
  series: [
    {
      name: '实心数据',
      data: generateWaveData(85, 0, 0.25, 60, 4),
      zones: zones,
      zoneAxis: 'y',
      marker: {
        symbol: 'circle',
        radius: 6,
        lineWidth: 1,
      },
      shadow: { color: 'rgba(255,255,255,0.5)', width: 10 },
    },
    {
      name: '空心数据',
      data: generateWaveData(85, Math.PI / 2, 0.25, 60, 4),
      zones: zones,
      zoneAxis: 'y',
      marker: {
        symbol: 'diamond',
        fillColor: 'transparent', // ✅ 关键：空心点
        lineColor: null, // 自动继承 zones 的颜色
        radius: 7,
        lineWidth: 2,
      },
      lineWidth: 2,
      dashStyle: 'ShortDot',
    },
  ],
});

📊 最终图表效果:

[AAChartModel]

        lineColor: null, // 自动继承 zones 的颜色

我在转成 Kotlin 代码的时候, 测试发现上面的这个关键代码不好实现, 还需要花时间改一下.

[AAChartModel]

对应的 Kotlin 版本代码:

fun colorfulMarkerWithZonesChart(): AAChartModel {
    // 生成平滑波浪数据
    fun generateWaveData(amplitude: Double, phase: Double, step: Double, count: Int, noise: Double = 0.0): Array<Any> {
        val data = mutableListOf<Double>()
        for (i in 0 until count) {
            val y = amplitude * sin((i * step) + phase) + 120
            val noisyY = y + (Math.random() - 0.5) * noise
            data.add(String.format(java.util.Locale.getDefault(), "%.2f", noisyY).toDouble())
        }
        return data.toTypedArray()
    }
    
    // 色系分区
    val zones = arrayOf(
        AAZonesElement()
            .value(80.0)
            .color("#25547c"),
        AAZonesElement()
            .value(110.0)
            .color("#1e90ff"),
        AAZonesElement()
            .value(140.0)
            .color("#ffd066"),
        AAZonesElement()
            .value(170.0)
            .color("#04d69f"),
        AAZonesElement()
            .color("#ef476f")
    )
    
    return AAChartModel()
        .chartType(AAChartType.Scatter)
        .title("⚡️高饱和度波浪图 — 实心与空心 Marker 对比")
        .legendEnabled(true)
        .tooltipEnabled(true)
        .series(arrayOf(
            AASeriesElement()
                .name("实心数据")
                .data(generateWaveData(85.0, 0.0, 0.25, 60, 4.0))
                .zones(zones)
                .zoneAxis("y")
                .marker(AAMarker()
                    .symbol(AAChartSymbolType.Circle.value)
                    .radius(6)
                    .lineWidth(1)
                ),
            AASeriesElement()
                .name("空心数据")
                .data(generateWaveData(85.0, Math.PI / 2, 0.25, 60, 4.0))
                .zones(zones)
                .zoneAxis("y")
                .marker(AAMarker()
                    .symbol(AAChartSymbolType.Diamond.value)
                    .fillColor("transparent")
                    .lineColor(AANull())
                    .radius(7)
                    .lineWidth(2)
                )
                .dashStyle(AAChartLineDashStyleType.DashDot)
        )
        )
}

[AAChartModel]

更新 AAChartCore-Kotlin 至 8.1.0 版本即可使用.

• https://jitpack.io/#AAChartModel/AAChartCore-Kotlin

[MakaBaka976]

已完美解决，真的是太强了大佬