EXTJS 7.3.1 areaChart面积图如何根据数据值自定义标记点颜色

DevOps 小满

2026-10-11

EXTJS 7.3.1 面积图标记点动态变色实现方案

核心实现思路

通过面积系列marker配置项的renderer回调函数，对每个数据点的数值做判断，动态返回对应标记点样式即可。

具体实现步骤

移除原有全局统一的marker固定样式配置，在面积系列的marker配置中新增renderer回调
回调中读取当前数据点的y轴数值，判断是否小于75
按判断结果返回对应marker样式属性

完整配置示例

Ext.create('Ext.chart.CartesianChart', {
    // 原有图表基础配置保留
    series: [{
        type: 'area',
        xField: 'date', // 替换为你实际的x轴字段
        yField: 'value', // 替换为你实际的y轴字段
        marker: {
            type: 'circle',
            // 动态渲染标记点的核心回调
            renderer: function (sprite, config, data) {
                // 获取当前数据点的y值
                const currentVal = data.record.get('value');
                if (currentVal < 75) {
                    // 数值小于75时的自定义标记点样式
                    return {
                        fillStyle: '#e74c3c', // 填充色自定义
                        strokeStyle: '#c0392b', // 边框色自定义
                        radius: 5 // 标记点大小自定义
                    }
                }
                // 数值>=75时返回默认样式，和你原全局配置保持一致即可
                return {
                    fillStyle: '#3498db',
                    strokeStyle: '#2980b9',
                    radius: 4
                }
            }
        },
        // 其余系列原有配置保留
    }]
    // 其余图表其他配置保留
});