Highcharts arearange 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

Highcharts arearange draggableHigh 和 draggableLow 不起作用

Highcharts arearange draggableHigh and draggableLow not working

javascript

reactjs

charts

highcharts

react-highcharts