如何创建包含Area、Line与Bar的组合式Iron Condor图表？

HighCharts 实现示例 #

HighCharts支持多系列混合类型配置，可直接同时渲染Bar、Area、Line三种图表，适配Iron Condor策略的收益展示需求：

Highcharts.chart('container', {
    title: {
        text: 'Iron Condor 收益分析'
    },
    xAxis: {
        title: {
            text: '标的价格'
        },
        categories: [30, 35, 40, 45, 50, 55, 60, 65, 70]
    },
    yAxis: {
        title: {
            text: '收益（USD）'
        }
    },
    series: [
        // Bar系列：对应Iron Condor各行权价区间的固定收益
        {
            type: 'bar',
            name: '区间收益',
            data: [-50, 0, 100, 100, 100, 100, 0, -50, -100],
            color: '#7cb5ec'
        },
        // Area系列：整体收益曲线的填充展示
        {
            type: 'area',
            name: '累计收益',
            data: [-50, -25, 50, 100, 100, 50, -25, -50, -100],
            color: {
                linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
                stops: [[0, 'rgba(124, 181, 236, 0.5)'], [1, 'rgba(124, 181, 236, 0.1)']]
            },
            marker: {
                enabled: false
            }
        },
        // Line系列：标记当前标的价格或关键行权价
        {
            type: 'line',
            name: '当前标的价',
            data: [null, null, null, null, 48, null, null, null, null],
            color: '#ff0000',
            marker: {
                radius: 6
            }
        }
    ]
});

ApexCharts 实现示例 #

ApexCharts同样支持多系列类型混合，配置逻辑类似：

var options = {
    chart: {
        height: 350
    },
    series: [
        {
            name: '区间收益',
            type: 'bar',
            data: [-50, 0, 100, 100, 100, 100, 0, -50, -100]
        },
        {
            name: '累计收益',
            type: 'area',
            data: [-50, -25, 50, 100, 100, 50, -25, -50, -100]
        },
        {
            name: '当前标的价',
            type: 'line',
            data: [null, null, null, null, 48, null, null, null, null]
        }
    ],
    xaxis: {
        categories: [30, 35, 40, 45, 50, 55, 60, 65, 70],
        title: {
            text: '标的价格'
        }
    },
    yaxis: {
        title: {
            text: '收益（USD）'
        }
    }
};

var chart = new ApexCharts(document.querySelector("#container"), options);
chart.render();

关键说明 #

• 两个库均通过为不同series指定type属性，实现Bar、Area、Line的混合渲染
• 可根据实际Iron Condor策略的行权价、收益数据调整data数组和坐标轴配置

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