如何在HighCharts中为两个不同图例设置样式（无需jQuery）

Got it, let's work through your Highcharts legend symbol styling issue. Even though I can't view the target image you mentioned, I'll cover common customizations for column and spline legend symbols, and adjust your code to give you full control over their appearance without jQuery.

Key Issues in Your Current Code #

• Your series have empty name properties, which means the legend won't display meaningful labels (and might not render correctly)
• You haven't customized the legend symbols beyond disabling square symbols, so we need to add targeted styling for both the column and spline series.
• There's a small typo in your maxXY calculation (you used dataX instead of dataXY)
• A syntax error in the plotOptions.column.states.hover configuration (missing closing bracket)

Solution Approach #

1. Add meaningful series names: This ensures the legend displays the correct labels for each series.
2. Customize legend symbols per series type: Use Highcharts' built-in symbol rendering functions or define custom SVG paths to match your target style.
3. Tweak legend layout: Adjust spacing, size, and alignment to refine the overall look.
4. Fix existing code errors: Resolve typos and syntax issues to ensure proper functionality.

Modified Code with Legend Symbol Customization #

const dataX = [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6];
const dataXY = [27.0,9.5,14.5,18.2,21.5,25.2,26.5,23.3,18.3,13.9, 9.6];
let maxX = dataX.reduce((max, val) => (max > val ? max : val), dataX[0]);
let minX = dataX.reduce((min, val) => (min < val ? min : val), dataX[0]);
let minXY = dataXY.reduce((min, val) => (min < val ? min : val), dataXY[0]);
let maxXY = dataXY.reduce((max, val) => (max > val ? max : val), dataXY[0]); // Fixed typo here

proxy(FL_BEST_TIME_BIG, container => {
    Highcharts.chart(container, {
        chart: {
            scrollablePlotArea: {
                minWidth: window.innerWidth < 767 ? 767 : null,
                scrollPositionX: 0,
                marginTop: 20
            },
            spacingBottom: 100
        },
        credits: { enabled: false },
        subtitle: { text: null },
        xAxis: [
            {
                endOnTick: true,
                startOnTick: true,
                gridLineColor: "#EDEDED",
                min: 0,
                labels: {
                    format: "{value}",
                    style: { color: "#8F969A", fontSize: 11, fontFamily: "Roboto" }
                },
                categories: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]
            }
        ],
        yAxis: [
            {
                title: { text: "" }, // Primary yAxis
                labels: { enabled: false }
            },
            { // Secondary yAxis
                title: { text: null, style: { color: Highcharts.getOptions().colors[0] } },
                labels: {
                    format: "{value} грн",
                    style: { color: "#8F969A", fontSize: 11, fontFamily: "Roboto" },
                    enabled: window.innerWidth > 767 ? true : false
                },
                opposite: true
            }
        ],
        labels: {
            items: [
                {
                    html: "Цена",
                    style: { top: "50px", left: "60px", fontWeight: "bold", color: "#292C2E", fontSize: "16px", fontFamily: "Roboto" }
                },
                {
                    html: minX + " - " + maxX + " грн",
                    style: { top: "70px", left: "20px", fontWeight: "bold", color: "#292C2E", fontSize: "14px", fontFamily: "Roboto" }
                },
                {
                    html: "Температура",
                    style: { top: "50px", left: "180px", fontWeight: "bold", color: "#292C2E", fontSize: "16px", fontFamily: "Roboto" }
                },
                {
                    html: minXY + " - " + maxXY + " °C",
                    style: { top: "70px", left: "180px", fontWeight: "bold", color: "#292C2E", fontSize: "14px", fontFamily: "Roboto" }
                }
            ]
        },
        legend: {
            align: "left",
            itemDistance: 62,
            squareSymbol: false,
            alignColumns: false,
            itemHoverStyle: { color: "#292C2E" },
            itemStyle: { fontFamily: "Roboto", fontWeight: "bold", fontSize: 16, color: "#292C2E" },
            // Global symbol sizing
            symbolWidth: 24,
            symbolHeight: 12,
            symbolRadius: 6
        },
        plotOptions: {
            column: {
                animation: false,
                dataLabels: { enabled: false },
                states: {
                    inactive: { opacity: 1 },
                    hover: { enabled: false } // Fixed syntax error here
                },
                borderRadiusTopLeft: 5,
                borderRadiusTopRight: 5,
                groupPadding: 0.01,
                pointPadding: 0,
                // Custom legend symbol matching chart column corners
                legendSymbol: function(width, height, radius, options) {
                    return Highcharts.SVGRenderer.prototype.symbols.rect(0, 0, width, height, { borderRadius: 5 });
                }
            },
            series: {
                lineWidth: 4,
                marker: {
                    lineWidth: 0,
                    lineColor: null,
                    fillColor: null,
                    enabled: false,
                    states: { hover: { enabled: true } }
                },
                states: { inactive: { opacity: 1 } }
            },
            spline: {
                // Custom legend symbol: horizontal line with centered circle marker
                legendSymbol: function(width, height, radius, options) {
                    const centerY = height / 2;
                    const markerRadius = 4;
                    const path = [];
                    // Draw horizontal line
                    path.push('M', 0, centerY);
                    path.push('L', width, centerY);
                    // Draw centered circle
                    path.push('M', width / 2, centerY);
                    path.push('A', markerRadius, markerRadius, 0, 1, 1, width / 2, centerY + 0.1);
                    return path;
                }
            }
        },
        series: [
            {
                name: "Цена", // Added legend label
                type: "column",
                yAxis: 1,
                color: "#28B2FF",
                hover: { enabled: false },
                data: dataX,
                tooltip: { valueSuffix: " грн" }
            },
            {
                name: "Температура", // Added legend label
                type: "spline",
                color: "#FFBD46",
                pointStart: 0,
                hover: { enabled: false },
                data: dataXY,
                tooltip: { valueSuffix: "°C" }
            }
        ]
    });
});

Key Changes Explained #

• Fixed calculation typo: Corrected maxXY to use dataXY instead of dataX
• Added series names: Ensures legend labels are visible and match your chart's context
• Global legend styling: Adjusted symbol size and radius to set a consistent base look
• Custom column symbol: Matches the rounded corners of your chart's columns for visual consistency
• Custom spline symbol: Creates a horizontal line with a centered circle marker (tweak markerRadius to adjust circle size)
• Resolved syntax error: Closed the hover object in the column plot options to prevent rendering issues

If your target style requires a different symbol shape (e.g., a filled square for the spline), you can modify the legendSymbol function to return any valid SVG path that fits your needs.

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