高查特甘特:https://www.highcharts.com/docs/gantt/getting-started-gantt我想把这个下拉按钮图标改到文字标签的右边。如何编辑?第一个月
wqlqzqxt1#
这在API中是不可能的,但是可以通过 Package renderLabel函数来实现。
renderLabel
(function(H) { const { addEvent, isNumber, isObject, pick } = H, onTickHoverExit = function(label, options) { var css = isObject(options.style) ? options.style : {}; label.removeClass('highcharts-treegrid-node-active'); if (!label.renderer.styledMode) { label.css({ textDecoration: css.textDecoration }); } }, onTickHover = function(label) { label.addClass('highcharts-treegrid-node-active'); if (!label.renderer.styledMode) { label.css({ textDecoration: 'underline' }); } }, renderLabelIcon = function(tick, params) { var treeGrid = tick.treeGrid, isNew = !treeGrid.labelIcon, renderer = params.renderer, labelBox = params.xy, options = params.options, width = options.width || 0, height = options.height || 0, iconCenter = { x: labelBox.x + tick.label.getBBox().width + width, y: labelBox.y - (height / 2) }, rotation = params.collapsed ? 90 : 180, shouldRender = params.show && isNumber(iconCenter.y); var icon = treeGrid.labelIcon; if (!icon) { treeGrid.labelIcon = icon = renderer .path(renderer.symbols['circle'](options.x || 0, options.y || 0, width, height)) .addClass('highcharts-label-icon') .add(params.group); } // Set the new position, and show or hide icon[shouldRender ? 'show' : 'hide'](); // #14904, #1338 // Presentational attributes if (!renderer.styledMode) { icon .attr({ cursor: 'pointer', 'fill': pick(params.color, "#666666" /* Palette.neutralColor60 */ ), 'stroke-width': 1, stroke: options.lineColor, strokeWidth: options.lineWidth || 0 }); } // Update the icon positions icon[isNew ? 'attr' : 'animate']({ translateX: iconCenter.x, translateY: iconCenter.y, rotation: rotation }); }; H.wrap(H.Tick.prototype, 'renderLabel', function(proceed) { var tick = this, pos = tick.pos, axis = tick.axis, label = tick.label, mapOfPosToGridNode = axis.treeGrid.mapOfPosToGridNode, options = axis.options, labelOptions = pick(tick.options && tick.options.labels, options && options.labels), symbolOptions = (labelOptions && isObject(labelOptions.symbol, true) ? labelOptions.symbol : {}), node = mapOfPosToGridNode && mapOfPosToGridNode[pos], level = node && node.depth, isTreeGrid = options.type === 'treegrid', shouldRender = axis.tickPositions.indexOf(pos) > -1, prefixClassName = 'highcharts-treegrid-node-', styledMode = axis.chart.styledMode; var collapsed, addClassName, removeClassName; if (isTreeGrid && node) { // Add class name for hierarchical styling. if (label && label.element) { label.addClass(prefixClassName + 'level-' + level); } } proceed.apply(tick, Array.prototype.slice.call(arguments, 1)); if (isTreeGrid && label && label.element && node && node.descendants && node.descendants > 0) { collapsed = axis.treeGrid.isCollapsed(node); renderLabelIcon(tick, { color: (!styledMode && label.styles && label.styles.color || ''), collapsed: collapsed, group: label.parentGroup, options: symbolOptions, renderer: label.renderer, show: shouldRender, xy: label.xy }); // Add class name for the node. addClassName = prefixClassName + (collapsed ? 'collapsed' : 'expanded'); removeClassName = prefixClassName + (collapsed ? 'expanded' : 'collapsed'); label .addClass(addClassName) .removeClass(removeClassName); if (!styledMode) { label.css({ cursor: 'pointer' }); } // Add events to both label text and icon [label, tick.treeGrid.labelIcon].forEach(function(object) { if (object && !object.attachedTreeGridEvents) { // On hover addEvent(object.element, 'mouseover', function() { onTickHover(label); }); // On hover out addEvent(object.element, 'mouseout', function() { onTickHoverExit(label, labelOptions); }); addEvent(object.element, 'click', function() { tick.treeGrid.toggleCollapse(); }); object.attachedTreeGridEvents = true; } }); } }); }(Highcharts))
演示:https://jsfiddle.net/BlackLabel/k2rb6zgy/扩展高线图:https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
1条答案
按热度按时间wqlqzqxt1#
这在API中是不可能的,但是可以通过 Package
renderLabel
函数来实现。演示:https://jsfiddle.net/BlackLabel/k2rb6zgy/
扩展高线图:https://www.highcharts.com/docs/extending-highcharts/extending-highcharts