javascript - Highcharts 区域范围draggableHigh 和draggableLow 不起作用

Question

根据文档，series.arearange.dragDrop应接受 draggableHigh 和 draggableLow (均默认为 true)以允许单独拖动范围的高点和低点。换句话说，不仅可以向上或向下移动范围，还可以使其变窄或变宽。但我无法让它发挥作用。代码:

import React from "react";
import { render } from "react-dom";
// Import Highcharts
import Highcharts from "highcharts";
import more from "highcharts/highcharts-more";
import draggable from "highcharts/modules/draggable-points";

import HighchartsReact from "highcharts-react-official";

if (typeof Highcharts === "object") {
  more(Highcharts);
  draggable(Highcharts);
}

class App extends React.Component {
  render() {
    return (
      <div>
        <HighchartsReact
          highcharts={Highcharts}
          constructorType={"chart"}
          options={{
            credits: {
              enabled: false
            },
            title: {
              text: ""
            },
            tooltip: {
              valueDecimals: 2,
              shared: true
            },
            legend: {
              enabled: false
            },
            xAxis: {
              type: "datetime"
            },
            yAxis: {
              title: {
                text: ""
              },
              min: 0
            },
            series: [
              // …
              {
                name: "Range",
                data: [[0, 8, 3], [1, 1, 1], [2, 6, 8]],
                type: "arearange",
                dragDrop: {
                  draggableY: true,
                  draggableHigh: true,
                  draggableLow: true
                },
                lineWidth: 0,
                linkedTo: ":previous",
                color: "lightBlue",
                fillOpacity: 0.3,
                zIndex: 0,
                marker: {
                  enabled: false
                }
              }
            ]
          }}
        />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

演示:https://codesandbox.io/s/highcharts-react-demo-u151p

Answer 1

您的数据结构不正确:

data: [
  [0, 8, 3],
  [1, 1, 1],
  [2, 6, 8]
]

映射到'x'、'low'、'high'，并且low不能大于high。

您需要更改数据顺序或使用keys属性。

此外，您需要启用标记。删除以下内容:

marker: {
  enabled: false
}

<小时/>

API引用:

https://api.highcharts.com/highcharts/series.arearange.data

https://api.highcharts.com/highcharts/series.arearange.keys