highcharts - 带滚动条的 Highstock 双 x 轴

Question

我有一个带有双 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>

有任何想法吗？

标签： highchartsscrollbar

Answer 1

您需要向第一个 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/