更改Highcharts Drag的步長？

有沒有辦法改變用Highcharts拖動的步長？例如，當我有大數值的數據（千位數）時，拖拽數值和得到像4327這樣的隨機數字是非常不清楚的。我希望能夠做的是將拖動值舍入到某個點基於y尺度的最大值，但我一直無法弄清楚如何做到這一點。因此，在這種情況下，拖動將從4300到4400，而不是獲得隨機數字。這裏是一個JS提琴演示拖動時我得到了不必要的數字：更改Highcharts Drag的步長？

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>

任何幫助將不勝感激！

來源

2015-11-12 Brad Goldsberry

你能趕上[afterSetExtremes（http://api.highcharts.com/highcharts#xAxis.events.afterSetExtremes），並調用[setExtremes（HTTP：// API。 highcharts.com/highcharts#Axis.setExtremes）來適應您的偏好。 –

這個怎麼樣？

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

JSFiddle

來源

2015-11-12 23:52:33

謝謝，結果工作得很好，我接受了你的答案 –

如果需要改變點的值，那麼你可以改變的可拖動點插件過濾點的值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/

其他方式，不會要求編輯插件，是改變如何點在Highcharts更新正在通過包裝Point.prototype.update功能。

(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/

來源

2015-11-13 11:01:07

更改Highcharts Drag的步長？

回答

相關問題