Highstock двойная ось X со полосой прокрутки - PullRequest
Новая
       19

Highstock двойная ось X со полосой прокрутки

0 голосов
/ 30 октября 2018

У меня есть диаграмма с двойной осью X и сгруппированными категориями в качестве меток, и мне нужна рабочая полоса прокрутки. Я пробовал несколько способов, как этого добиться, но пока я не добился успеха ... Это ближайший, который я прошел, есть 10 «строк», из которых я отобразил 5, есть полоса прокрутки, но я не могу двигаться полоса прокрутки. 

var count = 10;

var dataArray = [];
for (var i = 0; i < count; i++) {
  dataArray[i] = [i + 1, i + 2, i + 3, i + 4, i + 5];
}

var categories1Array = [];
for (var i = 0; i < count; i++) {
  categories1Array[i] = i + 1;
}

var categories2Array = [];
for (var i = 0; i < count; i++) {
  categories2Array[i] = {
    name: "3rd",
    categories: [{
      name: "2nd",
      categories: ['1st']
    }]
  };
}

Highcharts.chart('container', {
  chart: {
    inverted: true
  },
  series: [{
    type: 'boxplot',
    data: dataArray,
    showInLegend: false
  }],
  xAxis: [{
      categories: categories1Array,
      max: 4,
      gridLineWidth: 1
    },
    {
      opposite: true,
      linkedTo: 0,
      categories: categories2Array,
      max: 9,
      scrollbar: {
        enabled: true
      },
      labels: {
        formatter: function() {
          return `<div style="width:30px">${this.value}</div>`;
        },
        useHTML: true
      }
    },
  ],
  credits: {
    enabled: false
  },
  title: {
    text: null
  },
  yAxis: {
    title: {
      text: null
    }
  }
});
#container {
  min-width: 310px;
  max-width: 800px;
  height: 300px;
  margin: 0 auto
}
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://blacklabel.github.io/grouped_categories/grouped-categories.js"></script>


<div id="container"></div>

Есть идеи?

1 Ответ

0 голосов
/ 30 октября 2018

Вам необходимо добавить полосу прокрутки к первой оси xAxis. Смотри: https://jsfiddle.net/wchmiel/vrheuwqc/

  xAxis: [{
    categories: categories1Array,
    max: 4,
    gridLineWidth: 1,
    scrollbar: {
      enabled: true
    }
  }, {
    opposite: true,
    linkedTo: 0,
    categories: categories2Array,
    min: 0,
    max: 9,
    labels: {
      formatter: function() {
        return `<div style="width:30px">${this.value}</div>`;
      },
      useHTML: true
    }
  }]

Чтобы выровнять полосу прокрутки справа от функции перезаписи диаграммы H.Scrollbar.prototype.position и добавить туда дополнительное смещение: 

(function(H) {
  H.Scrollbar.prototype.position = function(x, y, width, height) {
    var scroller = this,
      options = scroller.options,
      vertical = options.vertical,
      xOffset = height,
      yOffset = 0,
      method = scroller.rendered ? 'animate' : 'attr',
      customOffset = 133;

    scroller.x = x;
    scroller.y = y + this.trackBorderWidth;
    scroller.width = width; // width with buttons
    scroller.height = height;
    scroller.xOffset = xOffset;
    scroller.yOffset = yOffset;

    // If Scrollbar is a vertical type, swap options:
    if (vertical) {
      scroller.width = scroller.yOffset = width = yOffset = scroller.size;
      scroller.xOffset = xOffset = 0;
      scroller.barWidth = height - width * 2; // width without buttons
      scroller.x = x = x + scroller.options.margin;
    } else {
      scroller.height = scroller.xOffset = height = xOffset =
        scroller.size;
      scroller.barWidth = width - height * 2; // width without buttons
      scroller.y = scroller.y + scroller.options.margin;
    }

    // Set general position for a group:
    scroller.group[method]({
      translateX: x + customOffset, // add additional offset here
      translateY: scroller.y
    });

    // Resize background/track:
    scroller.track[method]({
      width: width,
      height: height
    });

    // Move right/bottom button ot it's place:
    scroller.scrollbarButtons[1][method]({
      translateX: vertical ? 0 : width - xOffset,
      translateY: vertical ? height - yOffset : 0
    });
  }
})(Highcharts);

Демо-версия: https://jsfiddle.net/wchmiel/9yf58pd6/

...