居中 Highstock 图表滚动条手柄

Question

我有一堆用 Highstock 图表呈现的股票图表 API。

为了使每个图表的滚动条手柄居中，我使用了以下代码：

            /* ============ 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 ============ */

问题是句柄和应该 'decorate' 它的 3 条垂直线分开了。（你可以看到整个东西HERE。）

关于如何将它们放在一起有什么建议吗？

Answer 1

    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();

  });

可以找到完整的解决方案HERE。感谢 Paweł Fus 的帮助！

居中 Highstock 图表滚动条手柄

Center Highstock chart scrollbar handle

charts

highcharts

highstock