gpt4 book ai didi

javascript - 如何设置导航器拖动 handle 的样式,Highstock

转载 作者:太空宇宙 更新时间:2023-11-04 02:30:38 24 4
gpt4 key购买 nike

除了颜色之外,是否可以设置导航器 handle 的样式(如形状、高度、宽度、边框半径、背景等)。

来自他的 API 文档:http://api.highcharts.com/highstock#navigator.handles ,我只能看到 backgroundColorborderColor

如果不支持这些选项,是否有办法从某些回调事件中显着替换它?

我想要的风格是这样的:

What I want

最佳答案


更新:从 v6.0.0 开始,可以通过 API 选项自定义句柄 - https://api.highcharts.com/highstock/navigator.handles.symbols

下面的遗留解决方案

可以扩展 Highcharts 并使用自定义函数覆盖 Highcharts.Scroller.prototype.drawHandle 函数。您可以在现有代码的基础上添加更多选项和元素,如本例所示:http://jsfiddle.net/kuos06o5/1/ (针对 Highstock 版本为 4.2.5 时的原始问题)

$(function() {
//custom handles
(function(HC) {
HC.Scroller.prototype.drawHandle = function(x, index) {
var scroller = this,
chart = scroller.chart,
renderer = chart.renderer,
elementsToDestroy = scroller.elementsToDestroy,
handles = scroller.handles,
handlesOptions = scroller.navigatorOptions.handles,
radius = handlesOptions.radius,
attr = {
fill: handlesOptions.backgroundColor,
stroke: handlesOptions.borderColor,
'stroke-width': 1
},
tempElem,
innerLinesOptions = handlesOptions.innerLines,
h = innerLinesOptions.height;

// create the elements
if (!scroller.rendered) {
// the group
handles[index] = renderer.g('navigator-handle-' + ['left', 'right'][index])
.css({
cursor: 'ew-resize'
})
.attr({
zIndex: 10 - index
})
.add();

// cirlce
tempElem = renderer.circle(0, 0, radius)
.attr(attr)
.add(handles[index]);
elementsToDestroy.push(tempElem);

// inner lines
tempElem = renderer.path([
'M', -1.5, -h / 2,
'L', -1.5, h / 2,
'M', 1.5, -h / 2,
'L', 1.5, h / 2
])
.attr({
stroke: innerLinesOptions.color,
'stroke-width': 1
})
.add(handles[index]);
elementsToDestroy.push(tempElem);
}

// Place it
handles[index][chart.isResizing ? 'animate' : 'attr']({
translateX: scroller.scrollerLeft + scroller.scrollbarHeight + parseInt(x, 10),
translateY: scroller.top + scroller.height / 2
});
};
})(Highcharts);




$('#container').highcharts('StockChart', {

navigator: {
handles: {
backgroundColor: 'white',
borderColor: 'grey',
radius: 8,
innerLines: {
color: 'blue',
height: 6
}
}
},

rangeSelector: {
selected: 1
},

series: [{
name: 'USD to EUR',
data: usdeur
}]
});
});

在较新的版本(4.2.6、4.2.7 和 5.0.0 - 当前最新版本)中移动了 drawHandle,因此包装器应以:

    HC.Navigator.prototype.drawHandle = function(x, index) {

演示:http://jsfiddle.net/kuos06o5/2/

关于javascript - 如何设置导航器拖动 handle 的样式,Highstock,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36570955/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com