使用 Highcharts-React 拖放不起作用

Question

我想向 Highcharts arearange 系列添加拖放功能（在 Y 方向）。据我所知，我应该将配置放在 series.arearange.dragDrop:

// …

import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";
import more from "highcharts/highcharts-more";

// …

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

// …

<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: chartData.average_ranges,
        type: "arearange",
        dragDrop: {
          draggableY: true,
        },
        lineWidth: 0,
        linkedTo: ":previous",
        color: "lightBlue",
        fillOpacity: 0.3,
        zIndex: 0,
        marker: {
          enabled: false
        }
      },
      // …
    ]
  }}
/>

但是，这并不能使点可拖动。控制台中没有错误。在 Safari 和 Firefox 中测试。

我也试过启用plotOptions.arearange.dragDrop.draggableY，但也没用。

Answer 1

您需要导入并初始化draggable-points模块：

import Highcharts from "highcharts";
import more from "highcharts/highcharts-more";
import draggable from "highcharts/modules/draggable-points";

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

现场演示： https://codesandbox.io/s/highcharts-react-demo-llomi

文档： https://github.com/highcharts/highcharts-react#how-to-add-a-module

使用 Highcharts-React 拖放不起作用

Drag and drop not working using Highcharts-React

javascript

charts

highcharts

reactjs

react-highcharts