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进行拖放操作不起作用

1 个答案: