Гистограмма с накоплением Highstock с ползунком, наложенным на график

Question

Я пытаюсь реализовать гистограмму с ползунком, наложенным на график, подобный следующему изображению Гистограмму с ползунком, наложенным на график .

Существуют ли какие-либо варианты API-интерфейсов Highstocks, которые я Можно ли использовать рычаги для реализации этого поведения?

Примечание. Я пробовал использовать опцию навигатора с большим запасом. Но опция Navigator помогает отображать ползунок под графиком. Я хочу, чтобы на графике был наложен слой

Answer 1

Вы можете скрыть основной график и просто отобразить навигатор: https://jsfiddle.net/bqhz2fwn/

Единственные изменения, которые я внес в вашу скрипку, заключались в том, чтобы скрыть ось X и задать высоту оси Y 0:

    "xAxis": {
  "categories": [
    1996,
    1997,
    1998,
    1999,
    2000,
    2001,
    2002,
    2003,
    2004,
    2005,
    2006,
    2007,
    2008,
    2009,
    2010,
    2011,
    2012,
    2013,
    2014,
    2015,
    2016
  ],
  lineWidth: 0,
  tickLength: 0,
  labels: {
    enabled: false
  }
},
yAxis: {
  height: 0,
  gridLineWidth: 0,
  labels: {
    enabled: false
  }
},

А затем увеличьте высоту навигатора, чтобы заполнить пространство:

    "navigator": {
  height: 275,

Answer 2

1. С помощью параметров API вы можете достичь этого, управляя такими параметрами навигатора, как: высота , поле и c. Однако, это решение, на мой взгляд, нарушает работоспособность и удобочитаемость диаграммы.

Демонстрация: https://jsfiddle.net/BlackLabel/nqeuhdgk/

"navigator": {
    maskInside: false,
  yAxis: {
    lineWidth: 1,
    minorTicks: true,
    labels: {
      enabled: true
    }
  },
  height: 260,
  margin: 150,
  "enabled": true,
  "series": {
    "stacking": 'normal',
    "type": 'column',
    dataGrouping: {
        enabled: false
    }
  },

},

Обратите внимание, что по сравнению с вашим Демонстрация, не каждый столбец показан и читаемость yAxis отличается.

---

Я сделал некоторые изменения в коде ядра, и вот мой вывод, который, я думаю, является лучшим решением.

Демонстрация: https://jsfiddle.net/BlackLabel/07mdwou6/

Проверьте это и дайте мне знать, что вы думаете.

---

API: https://api.highcharts.com/highstock/navigator.height