排列图例元素的一种可能方法是在legend.labelFormatter中编辑图例并添加Unicode行字符。要使复选框位于右侧，您也可以在legend.itemCheckboxStyle中设置其样式。

legend: {
    symbolWidth: 0,
    useHTML: true,
    labelFormatter: function() {
      return `<div>${this.name}<span style="color: green;">&#9473;</span></div>`;
    },
    itemDistance: 50,
    itemCheckboxStyle: {
      "width": "13px",
      "height": "13px",
      "margin-left": "-130px",
      "position": "absolute"
    }
  },

API参考：
https://api.highcharts.com/highcharts/legend.itemCheckboxStyle
演示：https://jsfiddle.net/BlackLabel/sbcL7rp9/3/

经过大量的研究和试验，我设法让这一切工作。

选项（默认选项和事件，也可在加载时切换可见性）

const series = GetSeries(opts, null);
...
// Check if Series is supposed to be hidden from load (from the checkbox selected prop), if it is, hide it
series.forEach((serie) => {
    if (serie.selected !== undefined && serie.selected === false) serie.visible = false;
});

const defaultOptions: Highcharts.Options = {
    ...,
    legend: {
        borderColor: "transparent",
        verticalAlign: "top",
        align: "left",
        x: 14,
    },
    ...,
    plotOptions: {
        series: {
            ...
            showCheckbox: true,
            selected: true,
            events: {
                checkboxClick: function () {
                    this.setVisible(!this.visible);
                },
                legendItemClick: function () {
                    const seriesIndex = this.index;
                    this.chart.series[seriesIndex].select();
                },
            },
        },
        ...
    },
    ...
};

return mergeObjects(defaultOptions, opts);
}

还有很多解决方案扩展Highcharts：

// Adjust position of the Highchart Legend Checkbox, and switch label and symbol in the legend
function legendPositionAdjustments(
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    this: any,
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    p: any,
    scrollOffset: number
) {
    const pixelsToREM = (value: number) => {
        return value / 16;
    };
    const alignAttr = this.group.alignAttr;
    const clipHeight = this.clipHeight || this.legendHeight;
    let translateY: number;
const legendMainElement = this.box.parentGroup.element;
// Adjust the main legend element to be closer to the checkbox
if (legendMainElement) {
    Highcharts.attr(legendMainElement, "transform", "translate(19, 10)");
}
if (alignAttr) {
    translateY = alignAttr.translateY;
    this.allItems.forEach(function (item: {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        checkbox: any;
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        legendItem: { getBBox: (arg0: boolean) => any };
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        checkboxOffset: any;
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        legendGroup: any;
    }) {
        const bBox = item.legendItem.getBBox(true);

        // Change position of Label and Symbol in the Highcharts Legend
        const legendItemElement = item.legendGroup.element;
        const legendItemPath = legendItemElement.querySelector("path.highcharts-graph");
        const legendItemPoint = legendItemElement.querySelector("path.highcharts-point");
        const legendItemText = legendItemElement.querySelector("text");
        if (legendItemPath) {
            Highcharts.attr(legendItemPath, "transform", `translate(${bBox.width + 3}, 0)`);
        }
        if (legendItemPoint) {
            Highcharts.attr(legendItemPoint, "transform", `translate(${bBox.width + 3}, 0)`);
        }
        if (legendItemText) {
            Highcharts.attr(legendItemText, "x", 0);
        }

        // Adjust the position of the checkbox to the left side of the Highcharts Legend
        const checkbox = item.checkbox;
        let top;
        let left;
        if (checkbox) {
            top = translateY + checkbox.y + (scrollOffset || 0) + 4;
            left = alignAttr.translateX + item.checkboxOffset + checkbox.x - 100 - bBox.width + 17;
            Highcharts.css(checkbox, {
                left: pixelsToREM(left) + "rem",
                top: pixelsToREM(top) + "rem",
                display: top > translateY - 6 && top < translateY + clipHeight - 6 ? "" : "none",
            });
        }
    });
}
}

// This function is called when triggering show/hide of series, always calling with visibility = true
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
function colorizeLegendRegardlessOfVisibility(this: any, proceed: any, item: any, visible: any) {
    proceed.call(this, item, true);
}

这将：

• 当系列隐藏或图例未聚焦时，避免更改图例和符号的颜色
• 将复选框正确定位到图例的左侧
• 切换SVG中符号和标签的位置

希望能对以后遇到类似问题的人有所帮助。