Charts 中心高位图表滚动条手柄

我有一堆用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 ============ */

问题是把手和应该“装饰”它的3条垂直线是分开的。（你可以看到整件事。）

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

函数getData（）{
    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();

  });

//生成一个随机数据数组
var数据=[]，
时间=（新日期（））.getTime（），
我
对于（i=-999；i 10%
最小值=数据[数学四舍五入（l/2-范围/2）][0]，
最大值=数据[数学舍入（l/2+范围/2）][0]；
返回{
敏:敏,，
马克斯：马克斯
};
}
/*===============图表选项开始=========================*/
变量选项={
图表：{
zoomType:'x'，
活动：{
加载：函数（）{
//设置图表的每秒更新
var系列=本系列[0]；
setInterval（函数（）{
var x=（新日期（））.getTime（）；
var y=Math.round（Math.random（）*100）；
系列。添加点（[x，y]）；
}, 1000);
}
}
},
xAxis：{
},
范围选择器：{
按钮：[{
计数：1，
键入：“分钟”，
文字：“1M”
}, {
计数：5，
键入：“分钟”，
文字：“5M”
}, {
键入：“全部”，
文字：“全部”
}],
输入：错误，
已选：0
},
标题：{
文本：空
},
出口：{
已启用：false
},
//禁用导航器
导航器：{
已启用：false
},
系列：[{
名称：“”
}]
}
/*===============图表选项结束============================*/
/*===============开始绘制图表======================*/
函数renderCharts（）{
$（'div.chart-container'）。每个（函数（）{
var chartId=$（this.attr（'id'）；
var chartIdParts=chartId.split（'-'）；
var chartIdentifier=chartIdParts[1]；
//手动设置图表选项
var chartId=“chart”+图表标识符；
var图表=$（“#”+图表ID）；
var renderTo=“chartcontainer-”+chartIdentifier；
//为每个aech容器渲染图表
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=newhighcharts.StockChart（$.extend（true，{}，options））；
});
}
函数setChatType（）{
//显示类型列表（piker）
$（'.current type'）。在（'click'，函数（）{
$（this）.parents（'div.chart-options'）.find（'ul.type ul'）.addClass（'clicked'）；
});
$（'.chart options ul li a'）。打开（'单击'，函数（）{
//获取piked图表类型
var type=$（this.parent（'li'）.attr（'data-chart-type'）；
//用于文本和标题大写
var textAndTitle=type.replace（/^[a-z]/，函数（m）{
返回m.toUpperCase（）
});
//在选择器中显示piked类型
var currSetClass='当前类型'+类型；
$（this）.parents（'.chart options'）.find（'.current type'））
.text（text和title）
艾特先生({
类别：currSetClass，
标题：text和title
});
//然后隐藏类型列表
$（'.chart options ul'）.removeClass（'clicked'）；
//按ID标识当前图表容器
var chartCtnId=$（this）.parents（'div.chart'）.find（'.chart container'）.attr（'id'）；
//使用新类型重新渲染图表
options.chart.renderTo=chartCtnId；
options.chart.type=类型；
var chart=newhighcharts.StockChart（$.extend（true，{}，options））；
});
}
/*===============绘制图表结束======================*/
$（文档）.ready（函数（）{
$（“article.grid:偶数”）.addClass（'左'）
$（“article.grid:odd”）.addClass（'right'）；
//绘制图表
renderCharts（）；
//设置/更改图表类型
setChatType（）；
});

可以找到整个解决方案。

---

感谢PaWe Fus的帮助！

为什么要使用一些jQuery方法来移动DOM中的HTML标记，而不是使用<代码>图表.xActh.min > /Cux>/Cord>Max <代码>？我需要将中间的Healle放置在中间。MI/MAX只会把它放在极端。对Max和max设置XAXIS，您也会为导航器设置席席，SEe demo：-当然，如果您使用的是有巨大间隙的序数轴，它可能会有点不同。在我的例子中，点数是可变的，序列是动态生成的，因此上述解决方案，即使很优雅，也不适用。您认为哪一部分是错误的？

range=50

？这只是所选范围的点数。您想要吗他的方法更具动态性？而不是将

50

设置在那里

l*0.1

，然后你将选择10%的所有点位于所选区域内。我认为我的解决方案非常适合你的情况，但是可能需要一些改进，以满足你的需要。如果序列是动态生成的，那么在添加该序列后，你仍然可以设置所需的极端值（使用

setextrems（）

方法）。