javascript - 更改 Highcharts Drag 的步长?

标签 javascript highcharts

有没有办法改变 Highcharts 拖动的步长。例如,当我有大值(数千)的数据时,拖动值并获取像 4327 这样的随机数是非常不干净的。我想要做的是将拖动值四舍五入到某个点基于 y 尺度的最大值,但我一直无法弄清楚如何做到这一点。因此,在这种情况下,拖动将从 4300 到 4400,而不是在中间获取随机数。这是一个 JS fiddle ,演示了拖动时得到的不必要的数字:

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><br/>'
        },
        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>

任何帮助将不胜感激!

最佳答案

这个怎么样?

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

JSFiddle

关于javascript - 更改 Highcharts Drag 的步长?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33680949/

相关文章:

javascript - 如何使用 highcharts 在服务器上保存图表图像?

javascript - 仅在 Highcharts 的一个标记中禁用标记悬停

javascript - highchart x 轴和随机 y 值

php - 关于将 Highstocks 图表图像发送到服务器的建议

javascript - jQuery UI 可对动态添加的元素进行排序

javascript - 如何通过Electron应用程序在Chrome中打开链接?

javascript - 如何将 Web Midi API 连接到 native 应用程序(如 Ableton live)

javascript - tinymce - fontsizeselect 格式显示值

javascript - Highcharts 的 JSON 数据格式

javascript - 来自 Javascript 的 CSS 跨浏览器不透明度