Highcharts 可拖动分组错误栏

Question

我正在尝试设置一个 Highcharts 演示，其中单独使用错误栏（没有其他数据系列）。我希望误差条可以在 Y 轴上拖动并分组，这样如果您拖动一个误差条，那么整个组都会移动。下面的代码允许每个单独的错误栏可拖动，但我不知道如何正确地对它们进行分组。这在 Highcharts 中可能吗？

Highcharts.chart("container", {
  chart: {},
  title: {
    text: "Draggable Error Bars",
  },
  xAxis: [
    {
      categories: [
        "2015",
        "2016",
        "2017",
        "2018",
        "2019",
        "2020",
        "2021",
        "2022",
        "2023",
        "2024",
        "2025",
      ],
    },
  ],
  yAxis: [
    {
      // Primary yAxis
      labels: {
        format: "{value} $",
        style: {
          color: "#DF8500",
        },
      },
      title: {
        text: "Y Axis",
        style: {
          color: "#DF8500",
        },
      },
    },
  ],

  tooltip: {
    shared: false,
  },
  plotOptions: {
    errorbar: {
      dragDrop: {
        draggableY: true,
        grouping: true,
        groupby: "groupId",
      },
    },
  },
  series: [
    {
      name: "Generic bars",
      type: "errorbar",
      dragDrop: {
        draggableHigh: false,
        draggableLow: false,
        draggableY: true,
        grouping: true,
        groupby: "groupId",
      },
      groupId: "Group A",
      data: [
        [50.0, 70.0],
        [60.0, 80.0],
        [70.0, 90.0],
        [80.0, 100.0],
        [90.0, 110.0],
        [100.0, 120.0],
        [110.0, 130.0],
        [120.0, 140.0],
        [130.0, 150.0],
        [140.0, 160.0],
        [150.0, 170.0],
      ],
    },
  ],
})

Answer 1

当然，只需确保 groupId 正确应用于每个数据点（而不是整个系列）。演示：https://jsfiddle.net/BlackLabel/nwhd9ax0/

Highcharts.chart("container", {
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        format: "{point.name}",
      },
      dragDrop: {
        draggableY: true,
        liveRedraw: true,
        groupBy: "groupId", // Group data points with the same groupId
      },
    },
  },
  series: [
    {
      name: "Generic bars",
      type: "errorbar",
      data: [
        { low: 50.0, high: 70.0, groupId: "Group A" },
        { low: 60.0, high: 80.0, groupId: "Group A" },
        { low: 70.0, high: 90.0, groupId: "Group A" },
        { low: 80.0, high: 100.0, groupId: "Group A" },
        { low: 90.0, high: 110.0, groupId: "Group A" },
        { low: 100.0, high: 120.0, groupId: "Group A" },
        { low: 110.0, high: 130.0, groupId: "Group A" },
        { low: 120.0, high: 140.0, groupId: "Group A" },
        { low: 130.0, high: 150.0, groupId: "Group A" },
        { low: 140.0, high: 160.0, groupId: "Group A" },
        { low: 150.0, high: 170.0, groupId: "Group A" },
      ],
    },
  ],
})