如何在散点图中添加滚动条？

Question

我已经使用highchart创建散点图，但是当系列数据的数量多于范围渲染区域时，无法添加垂直滚动条。

当前所有系列彼此重叠。

Current behavior:
https://jsfiddle.net/s1eL30Lh/235/

我想向图表添加垂直滚动，因此所有系列将正确显示，而不会彼此重叠。

Some thing like: 
https://jsfiddle.net/s1eL30Lh/237/

Answer 1

您可以使用 HighStock 而不是 Highcharts -更多infos

yAxis: {
    tickInterval: 1,

    scrollbar: {
      enabled: true,
    },
    max: 20, // To enable a default Zoom
    title: {
      text: 'sdsdsds'
    },
},

Api Doc和Updated Fiddle

Answer 2

您只需要增加用于填充图形的div的高度即可。

<div id="container" style="height: 800px;""></div>

function toMs(h, m) {
  return Date.UTC(1970, 0, 1, h, m);
}

var series = [{
  // First series
  name: 'Running',
  color: 'green',
  dataRaw: [{
    y: 1,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 30), toMs(15, 40)],
      [toMs(15, 50), toMs(16, 10)]
    ]
  }, {
    y: 2,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 30), toMs(15, 55)]
    ]
  }]
}, {
  // Second series
  name: 'Not running',
  color: 'red',
  dataRaw: [{
    y: 1,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 40), toMs(15, 50)]
    ]
  }, {
    y: 2,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }, {
    y: 3,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }, {
    y: 4,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }, {
    y: 5,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }, {
    y: 2,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }, {
    y: 2,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }, {
    y: 6,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }, {
    y: 7,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }, {
    y: 8,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }, {
    y: 9,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }, {
    y: 10,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }, {
    y: 11,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }, {
    y: 12,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }, {
    y: 13,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }, {
    y: 14,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }, {
    y: 15,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }, {
    y: 16,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }, {
    y: 17,
    xRanges: [
      // first value: from; second value: to
      [toMs(15, 55), toMs(16, 10)]
    ]
  }]
}].map(function(series) {
  series.data = [];
  series.dataRaw.forEach(function(dataRaw) {
    dataRaw.xRanges.forEach(function(xRange) {
      series.data.push([xRange[0], dataRaw.y], [xRange[1], dataRaw.y], [xRange[1], null]); // null breakes the line
    }); // forEach
  }); // forEach
  return series;
});


var chart = Highcharts.chart('container', {
  chart: {
    type: 'scatter',
    height:500,
  //width: 300,
  },
  title: {
    text: 'Example'
  },
  tooltip: {
    formatter: function() {
      return Highcharts.dateFormat('%H:%M', this.x);
    }
  },
  plotOptions: {
    series: {
      lineWidth: 5,
      marker: {
        enabled: false,
        symbol: 'circle'
      }
    }
  },

  xAxis: {
    title: {
      text: 'Time'
    },
    type: 'datetime',
    dateTimeLabelFormats: { //force all formats to be hour:minute
      second: '%H:%M',
      minute: '%H:%M',
      hour: '%H:%M',
      day: '%H:%M',
      week: '%H:%M',
      month: '%H:%M',
      year: '%H:%M'
    },
    scrollbar: {
        enabled: true
    },
    
  },

  yAxis: {
    tickInterval: 1,
    scrollbar: {
        enabled: true
    },
    title: {
       text: 'sdsdsds'
    },
  },
  series: series
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 800px;""></div>