highCenter高股价图表滚动条手柄

            /* ============ Position chart scroll BEGIN ============  */
            $(".highcharts-container").each(function () {
              var scrollBar = $(this).find('.highcharts-scrollbar');
              var scrollBarElms = scrollBar.find('rect');
              var scrollBarTrackWidth = $(scrollBarElms[0]).attr("width");
              var scrollBarHandleWidth = $(scrollBarElms[1]).attr("width");
              var xPos = (scrollBarTrackWidth / 2) - (scrollBarHandleWidth / 2);
              $(scrollBarElms[1]).attr("x", xPos);
            });
            /*  ============ Position chart scroll END ============ */

    function getData() {
        // generate an array of random data
        var data = [],
            time = (new Date()).getTime(),
            i;
        for (i = -999; i <= 0; i = i + 1) {
            data.push([
            time + i * 1000,
            Math.round(Math.random() * 100)]);
        }
        return data;
    }
    function getRange(data) {
        var l = data.length,
            range = l * 0.1, // number of points -> 10%
            min = data[Math.round(l / 2 - range / 2)][0],
            max = data[Math.round(l / 2 + range / 2)][0];
        return {
            min: min,
            max: max
        };
    }
    /* ============ CHARTS OPTIONS BEGIN ============ */
      var options = {
          chart: {
              zoomType: 'x',
          events: {
            load: function () {
                // set up the updating of the chart each second
                var series = this.series[0];
                setInterval(function () {
                    var x = (new Date()).getTime();
                    var y = Math.round(Math.random() * 100);
                    series.addPoint([x, y]);
                }, 1000);
            }
        }
      },
      xAxis: {
      },
      rangeSelector: {
          buttons: [{
              count: 1,
              type: 'minute',
              text: '1M'
      }, {
          count: 5,
          type: 'minute',
          text: '5M'
      }, {
          type: 'all',
          text: 'All'
      }],
      inputEnabled: false,
      selected: 0
      },
      title: {
          text: null
      },
      exporting: {
          enabled: false
      },
      // Disable navigator
      navigator: {
          enabled: false
      },
      series: [{
          name: ''
      }]
  }
  /* ============ CHARTS OPTIONS END ============ */
  /* ============ DRAW CHARTS BEGIN ============ */
  function renderCharts() {
      $('div.chart-container').each(function () {
          var chartId = $(this).attr('id');
          var chartIdParts = chartId.split('-');
          var chartIdentifier = chartIdParts[1];
          //Set chart options dinamically
          var chartId = "chart" + chartIdentifier;
          var chart = $('#' + chartId);
          var renderTo = "chartcontainer-" + chartIdentifier;
          //Render Charts for each aech container
          options.chart.renderTo = renderTo;
          options.chart.type = 'line';
          options.series[0].data = getData();
          var range = getRange(options.series[0].data);
          options.xAxis.min = range.min;
          options.xAxis.max = range.max;
          var chart = new Highcharts.StockChart($.extend(true, {}, options));
      });
  }
  function setChatType() {
      // Show types list (piker)
      $('.current-type').on('click', function () {
          $(this).parents('div.chart-options').find('ul.type ul').addClass('clicked');
      });
      $('.chart-options ul ul li a').on('click', function () {
          //Get piked chart type
          var type = $(this).parent('li').attr('data-chart-type');
          // For text and Title Capitalization
          var textAndTitle = type.replace(/^[a-z]/, function (m) {
              return m.toUpperCase()
          });
          // Show piked type in picker
          var currSetClass = 'current-type ' + type;
          $(this).parents('.chart-options').find('.current-type')
              .text(textAndTitle)
              .attr({
              class: currSetClass,
              title: textAndTitle
          });
          // Then Hide the types list
          $('.chart-options ul ul').removeClass('clicked');
          //Identify current chart container by ID
          var chartCtnId = $(this).parents('div.chart').find('.chart-container').attr('id');
          // Render chart again with new type
          options.chart.renderTo = chartCtnId;
          options.chart.type = type;
          var chart = new Highcharts.StockChart($.extend(true, {}, options));
      });
    }
  /* ============ DRAW CHARTS END ============ */
  $(document).ready(function () {
      $("article.grid:even").addClass('left')
      $("article.grid:odd").addClass('right');
      // Draw charts
      renderCharts();
      // Set/change chart type
      setChatType();
  });

整个解决方案可以在这里找到。感谢PawełFus的帮助！