height chart bar can draggable.

最新推荐文章于 2025-06-05 14:27:22 发布

terry1989

最新推荐文章于 2025-06-05 14:27:22 发布

阅读量868

点赞数

文章标签： function animation each events filter object

本文介绍了一个实验性的可拖动数据点插件，该插件允许用户在图表上通过鼠标操作来调整数据点的位置，并在指定的最小和最大值范围内进行限制。插件还提供了对柱状图数据点的可视化跟踪功能，特别是对于小型数据点更为直观。通过此插件，用户可以更灵活地调整图表数据，增强交互性和数据分析能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

http://jsfiddle.net/highcharts/AyUbx//** * Experimental Draggable points plugin * Revised 2012-07-09 * * On Saving this jsbin, remember to update http://jsfiddle.net/highcharts/AyUbx/ */(function(Highcharts) { var addEvent = Highcharts.addEvent, each = Highcharts.each; /** * Filter by dragMin and dragMax */ function filterRange(newY, series) { var options = series.options, dragMin = options.dragMinY, dragMax = options.dragMaxY; if (newY < dragMin) { newY = dragMin; } else if (newY > dragMax) { newY = dragMax; } return newY; } Highcharts.Chart.prototype.callbacks.push(function (chart) { var container = chart.container, dragPoint, dragX, dragY, dragPlotX, dragPlotY; chart.redraw(); // kill animation (why was this again?) addEvent(container, 'mousedown', function(e) { var hoverPoint = chart.hoverPoint, options = hoverPoint && hoverPoint.series.options; if (options.draggableX) { dragPoint = hoverPoint; dragX = e.pageX; dragPlotX = dragPoint.plotX; } if (options.draggableY) { dragPoint = hoverPoint; dragY = e.pageY; dragPlotY = dragPoint.plotY + (chart.plotHeight - (dragPoint.yBottom || chart.plotHeight)); } }); addEvent(container, 'mousemove', function(e) { if (dragPoint) { var deltaY = dragY - e.pageY, deltaX = dragX - e.pageX, newPlotX = dragPlotX - deltaX - dragPoint.series.xAxis.minPixelPadding, newPlotY = chart.plotHeight - dragPlotY + deltaY, newX = dragX === undefined ? dragPoint.x : dragPoint.series.xAxis.translate(newPlotX, true), newY = dragY === undefined ? dragPoint.y : dragPoint.series.yAxis.translate(newPlotY, true), series = dragPoint.series; newY = filterRange(newY, series); dragPoint.update([newX, newY], false); chart.tooltip.refresh(dragPoint); if (series.stackKey) { chart.redraw(); } else { series.redraw(); } } }); function drop(e) { if (dragPoint) { var deltaX = dragX - e.pageX, deltaY = dragY - e.pageY, newPlotX = dragPlotX - deltaX - dragPoint.series.xAxis.minPixelPadding, newPlotY = chart.plotHeight - dragPlotY + deltaY, series = dragPoint.series, newX = dragX === undefined ? dragPoint.x : dragPoint.series.xAxis.translate(newPlotX, true), newY = dragY === undefined ? dragPoint.y : dragPoint.series.yAxis.translate(newPlotY, true); newY = filterRange(newY, series); dragPoint.firePointEvent('drop'); dragPoint.update([newX, newY]); dragPoint = dragX = dragY = undefined; } } addEvent(document, 'mouseup', drop); addEvent(container, 'mouseleave', drop); }); /** * Extend the column chart tracker by visualizing the tracker object for small points */ var colProto = Highcharts.seriesTypes.column.prototype, baseDrawTracker = colProto.drawTracker; colProto.drawTracker = function() { var series = this; baseDrawTracker.apply(series); each(series.points, function(point) { point.tracker.attr(point.shapeArgs.height < 3 ? { 'stroke': 'black', 'stroke-width': 2, 'dashstyle': 'shortdot' } : { 'stroke-width': 0 }); }); }; })(Highcharts);var chart = new Highcharts.Chart({ chart: { renderTo: 'container', animation: false }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, plotOptions: { series: { cursor: 'ns-resize', point: { events: { drop: function() { $('#report').html( this.category + ' was set to ' + Highcharts.numberFormat(this.y, 2) ); } } } }, column: { stacking: 'normal' } }, tooltip: { yDecimals: 2 }, series: [{ data: [0, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], //draggableX: true, draggableY: true, dragMinY: 0, type: 'column' }, { data: [0, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4].reverse(), draggableY: true, dragMinY: 0, type: 'column' }, { data: [0, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], draggableY: true }]});