Highcharts arearange draggableВысокий и draggableLow не работает - PullRequest
Новая
       29

Highcharts arearange draggableВысокий и draggableLow не работает

0 голосов
/ 29 января 2020

Согласно документации, 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

1 Ответ

1 голос
/ 29 января 2020

У вас неверная структура данных: 

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* * 1028

...