Highcharts 库来创建一个堆叠的柱状图你可以使用 Highcharts 库来创建一个堆叠的柱状图，以显示一年中每

要在同一个堆叠柱状图中叠加一个曲线图，可以利用 Highcharts 的多轴图表功能。以下是一个示例代码，将业务类型 D 以曲线图形式叠加在堆叠柱状图上：

html
コードをコピーする
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>堆叠柱状图与曲线图 - 每月业务数量</title>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
</head>
<body>
    <div id="container" style="width: 100%; height: 400px;"></div>

    <script>
        // 示例数据：每个月份不同业务类型的件数
        const data = {
            'January': { typeA: 30, typeB: 50, typeC: 20, typeD: 100 },
            'February': { typeA: 20, typeB: 40, typeC: 30, typeD: 90 },
            'March': { typeA: 40, typeB: 60, typeC: 10, typeD: 80 },
            'April': { typeA: 50, typeB: 20, typeC: 30, typeD: 70 },
            'May': { typeA: 60, typeB: 30, typeC: 20, typeD: 60 },
            'June': { typeA: 70, typeB: 50, typeC: 40, typeD: 50 },
            'July': { typeA: 80, typeB: 60, typeC: 30, typeD: 40 },
            'August': { typeA: 90, typeB: 70, typeC: 50, typeD: 30 },
            'September': { typeA: 100, typeB: 80, typeC: 40, typeD: 20 },
            'October': { typeA: 110, typeB: 90, typeC: 60, typeD: 10 },
            'November': { typeA: 120, typeB: 100, typeC: 50, typeD: 5 },
            'December': { typeA: 130, typeB: 110, typeC: 70, typeD: 15 }
        };

        // 提取 x 轴的类别（月份）
        const categories = Object.keys(data);

        // 提取各业务类型的数据
        const typeAData = categories.map(month => data[month].typeA);
        const typeBData = categories.map(month => data[month].typeB);
        const typeCData = categories.map(month => data[month].typeC);
        const typeDData = categories.map(month => data[month].typeD);

        // 使用 Highcharts 创建堆叠柱状图和曲线图
        Highcharts.chart('container', {
            chart: {
                zoomType: 'xy'
            },
            title: {
                text: '每月业务数量'
            },
            xAxis: [{
                categories: categories,
                crosshair: true
            }],
            yAxis: [{ // Primary yAxis
                title: {
                    text: '件数',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                },
                labels: {
                    format: '{value}',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                }
            }],
            tooltip: {
                shared: true
            },
            legend: {
                layout: 'vertical',
                align: 'left',
                x: 80,
                verticalAlign: 'top',
                y: 55,
                floating: true,
                backgroundColor:
                    Highcharts.defaultOptions.legend.backgroundColor || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            series: [{
                name: 'Type A',
                type: 'column',
                data: typeAData,
                color: '#FF0000', // 红色
                tooltip: {
                    valueSuffix: ' 件'
                }
            }, {
                name: 'Type B',
                type: 'column',
                data: typeBData,
                color: '#00FF00', // 绿色
                tooltip: {
                    valueSuffix: ' 件'
                }
            }, {
                name: 'Type C',
                type: 'column',
                data: typeCData,
                color: '#0000FF', // 蓝色
                tooltip: {
                    valueSuffix: ' 件'
                }
            }, {
                name: 'Type D',
                type: 'spline', // 线图
                data: typeDData,
                color: '#FF00FF', // 紫色
                tooltip: {
                    valueSuffix: ' 件'
                },
                marker: {
                    lineWidth: 2,
                    lineColor: Highcharts.getOptions().colors[3],
                    fillColor: 'white'
                }
            }]
        });
    </script>
</body>
</html>

代码说明：

HTML部分：
- 包含一个 div 容器用于显示图表。
JavaScript部分：
- 示例数据添加了一个新业务类型 typeD。
- 提取 x 轴的类别（月份）和各业务类型的数据。
- 使用 Highcharts 创建堆叠柱状图和曲线图，设置图表类型为 column 和 spline（曲线图），并启用堆叠功能。
- 自定义每个业务类型的颜色，使其在图表中区分开来。

通过这个示例，你可以看到如何使用 Highcharts 创建一个包含多种业务类型的堆叠柱状图，并叠加显示一个曲线图，用于表示不同的业务类型数据。你可以根据自己的实际数据和需求调整此代码。