首页 文章

更改Highcharts Drag的步长?

提问于
浏览
1

有没有办法改变使用Highcharts拖动的步长 . 例如,当我有大数值的数据(成千上万)时,拖动值并得到像4327这样的随机数是非常不干净的 . 我希望能够做的是将拖动值四舍五入到某个点基于y-scale的最大值,但我无法弄清楚如何做到这一点 . 因此在这种情况下,拖动将从4300变为4400,而不是在中间获取随机数 . 这是一个JS小提琴,演示了拖动时我得到的不必要的数字:

jsFiddle

var planChart; 

$(function () {
planChart = {
    chart: {

        animation: false
    },
    title: {
        text: ''
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        crosshair: true,
    },
    yAxis: [{ // Primary yAxis
        labels: {
            format: '{value}',
            style: {
                color: '#20709e'
            }
        },
        title: {
            text: 'title',
            style: {
                color: '#20709e'
            }
        },
    }],

    plotOptions: {
        series: {
            point: {
                events: {

                    drag: function (e) {
                        // Returning false stops the drag and drops. Example:
                        /*
                        if (e.newY > 300) {
                            this.y = 300;
                            return false;
                        }
                        */


                    },
                    drop: function () {  }
                }
            },
            stickyTracking: false
        },
        column: {
            stacking: 'normal'
        },
        line: {
            cursor: 'ns-resize'
        }
    },

    tooltip: {
        shared: true
    },

    credits: {
        enabled: false
    },

    series: [{
        name: 'title',
        tooltip: {
            pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.y} </b>
' }, data: [7042, 40494, 48204, 20383, 20938, 4803, 23903, 22, 23939, 13032, 1332, 93932], //draggableX: true, draggableY: true, dragMinY: 0, style: { color: '#20709e' } }] } $('.actualPlansPlot').highcharts(planChart); }); $(document).on('click', '#updateYScale', function(e) { var yValue = $('#newYValue')[0].value; planChart.yAxis[0].max = yValue; $('.actualPlansPlot').highcharts(planChart); })

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://rawgithub.com/highslide-software/draggable-points/master/draggable-points.js?1"></script>
<div class="actualPlansPlot" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<input id="newYValue" type="number" />
<button id="updateYScale">Update Scale</button>

任何帮助将不胜感激!

2 回答

  • 0

    这个怎么样?

    tooltip: {
         shared: true,
         formatter: function () {
               return  this.x + '
    <b>' + Math.ceil(this.y/100)*100 + '</b>'; } },

    JSFiddle

  • 0

    如果您需要更改某个点的值,则可以更改draggable-points插件的 filterRange 函数来过滤点值 . 例如 . 添加 dragPrecision 选项将更改返回的点值 .

    function filterRange(newY, series, XOrY) {
        var options = series.options,
            dragMin = pick(options['dragMin' + XOrY], undefined),
            dragMax = pick(options['dragMax' + XOrY], undefined),
            precision = pick(options['dragPrecision'], undefined);
    
        if(!isNaN(precision)) {
            newY = Math.round(newY / precision) * precision;
        }
    
        if (newY < dragMin) {
            newY = dragMin;
        } else if (newY > dragMax) {
            newY = dragMax;
        }
        return newY;
    }
    

    JSFiddle:http://jsfiddle.net/x8wbn5no/

    其他方式,不需要编辑插件,是通过包装 Point.prototype.update 函数来改变Highcharts中点的更新工作方式 .

    (function (H) {
        H.wrap(H.Point.prototype, 'update', function (proceed, options) {
            var filter = 100,
                filteredY = options && options.y;
            if(!isNaN(filteredY)) {
                arguments[1].y = Math.round(filteredY / filter) * filter;
            }
            // Run original proceed method
            proceed.apply(this, [].slice.call(arguments, 1));
        });
    }(Highcharts));
    

    JSFiddle:http://jsfiddle.net/sdvswdsw/

相关问题