将最大y轴点设置为比当前最大值大10％-高图

Question

在这个小提琴中：

http://jsfiddle.net/ot24zrkt/122/

y轴设置为：

    max : 50,
    min : 0

但是如何将最大Y轴值设置为比当前最大Y轴值大10％。 因此，提琴上的最大y轴值为34，是否可以添加一个值为34 +（34的10％）的新点，而不是硬编码应为的最大值？

小提琴代码：

HTML : 

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container2" style="width:500px;height:400px;margin:1.5em 1em;"></div>

<script>
var d          = new Date();
var pointStart = d.getTime();
Highcharts.setOptions({
    global: {
        useUTC:false
    },
    colors: [
        'rgba( 0,   154, 253, 0.9 )', //bright blue
        'rgba( 253, 99,  0,   0.9 )', //bright orange
        'rgba( 40,  40,  56,  0.9 )', //dark
        'rgba( 253, 0,   154, 0.9 )', //bright pink
        'rgba( 154, 253, 0,   0.9 )', //bright green
        'rgba( 145, 44,  138, 0.9 )', //mid purple
        'rgba( 45,  47,  238, 0.9 )', //mid blue
        'rgba( 177, 69,  0,   0.9 )', //dark orange
        'rgba( 140, 140, 156, 0.9 )', //mid
        'rgba( 238, 46,  47,  0.9 )', //mid red
        'rgba( 44,  145, 51,  0.9 )', //mid green
        'rgba( 103, 16,  192, 0.9 )'  //dark purple
    ],
    chart: {
        alignTicks:false,
        type:'',
        margin:[60,25,100,90],
        //borderRadius:10,
        //borderWidth:1,
        //borderColor:'rgba(156,156,156,.25)',
        //backgroundColor:'rgba(204,204,204,.25)',
        //plotBackgroundColor:'rgba(255,255,255,1)',
        style: {
            fontFamily: 'Abel,serif'
        }
    },
    title: {
        text:'Test Chart Title',
        align:'left',
        margin:10,
        x: 50,
        style: {
            fontWeight:'bold',
            color:'rgba(0,0,0,.9)'
        }
    },
    subtitle: {
        text:'Test Chart Subtitle',   
        align:'left',
        x: 52,
    },
    legend: { enabled: true },
    plotOptions: {
        area: {
            lineWidth:1,
            marker: {
                enabled:false,
                symbol:'circle',
                radius:4
            }
        },
        arearange: {
            lineWidth:1
        },
        areaspline: {
            lineWidth:1,
            marker: {
                enabled:false,
                symbol:'circle',
                radius:4
            }
        },
        areasplinerange: {
            lineWidth:1
        },
        boxplot: {
            groupPadding:0.05,
            pointPadding:0.05,
            fillColor:'rgba(255,255,255,.75)'
        },
        bubble: {
            minSize:'0.25%',
            maxSize:'17%'
        },
        column: {
            //stacking:'normal',
            groupPadding:0.05,
            pointPadding:0.05
        },
        columnrange: {
            groupPadding:0.05,
            pointPadding:0.05
        },
        errorbar: {
            groupPadding:0.05,
            pointPadding:0.05,
            showInLegend:true        
        },
        line: {
            lineWidth:1,
            marker: {
                enabled:false,
                symbol:'circle',
                radius:4
            }
        },
        scatter: {
            marker: {
                symbol: 'circle',
                radius:5
            }
        },
        spline: {
            lineWidth:1,
            marker: {
                enabled:false,
                symbol:'circle',
                radius:4
            }
        },
        series: {
            shadow: false,
            borderWidth:0,
            states: {
                hover: {
                    lineWidthPlus:0,
                }
            }
        }
    },
    xAxis: {
        title: {
            text: 'X Axis Title',
            rotation:0,
            textAlign:'center',
            style:{ 
                color:'rgba(0,0,0,.9)'
            }
        },
        labels: { 
            style: {
                color: 'rgba(0,0,0,.9)',
                fontSize:'9px'
            }
        },
        lineWidth:.5,
        lineColor:'rgba(0,0,0,.5)',
        tickWidth:.5,
        tickLength:3,
        tickColor:'rgba(0,0,0,.75)'
    },
    yAxis: {
        minPadding:0,
        maxPadding:0,
        gridLineColor:'rgba(204,204,204,.25)',
        gridLineWidth:0.5,
        title: { 
            text: 'Y Axis<br/>Title',
            rotation:0,
            textAlign:'right',
            style:{ 
                color:'rgba(0,0,0,.9)',
            }
        },
        labels: { 
            style: {
                color: 'rgba(0,0,0,.9)',
                fontSize:'9px'
            }
        },
        lineWidth:.5,
        lineColor:'rgba(0,0,0,.5)',
        tickWidth:.5,
        tickLength:3,
        tickColor:'rgba(0,0,0,.75)'
    }
}); 


</script>

CSS : 

@import url(https://fonts.googleapis.com/css?family=Changa+One|Loved+by+the+King|Fredericka+the+Great|Droid+Serif:400,700,400italic|Abel|Oswald:400,300,700);

body {
    font-family:Abel, Calibri, Helvetica, sans-serif;
    font-size:95%;
}

JavaScript : 

var chart;
var pointStart = Date.UTC(2014,0,1);
$(function() {

    $('#container2').highcharts({
        chart       : { type    : 'line' },
        title       : { },
        subtitle    : { },
        legend      : { enabled : true },
        tooltip     : { },
        plotOptions : {
            series  : {
                pointStart      : pointStart,
                pointInterval   : 24 * 3600 * 1000*30
            }
        },
        xAxis      : { 
            min:Date.UTC(2014, 0, 0),
            max:Date.UTC(2014, 11, 1),
            //allowDecimals: false,
            type           : 'datetime',
            tickInterval   : 24 * 3600 * 1000*30, //one day
            labels         : {
                rotation : 0
            },

        },
        yAxis      : { 
            max : 50,
            min : 0
        }
    }); 
    chart = $('#container2').highcharts();


var jsonString = '[ { "date": "2014-1-01", "in": "30", "out": "21" }, { "date": "2014-1-02", "in": "35", "out": "32" }, { "date": "2014-1-03", "in": "23", "out": "34" }, { "date": "2014-1-04", "in": "20", "out": "15" }, { "date": "2014-1-05", "in": "34", "out": "20" }, { "date": "2014-2-06", "in": "22", "out": "34" }, { "date": "2014-2-07", "in": "15", "out": "18" } ]';

var myData = JSON.parse(jsonString);
var dataArray = []

$.each(myData, function(i, obj) {
    console.log(obj.date)
    var d = new Date(obj.date)
   dataArray.push([Date.parse(d), parseInt(obj.in)])
});

    chart.addSeries({ 
        data: dataArray    
    });

    console.log('data is '+dataArray)
})

Answer 1

考虑以下：

var temp=[]
var height=0;
$.each(myData, function(i, obj) {
    console.log(obj.date)
    var d = new Date(obj.date)
   dataArray.push([Date.parse(d), parseInt(obj.in)])
   temp.push(parseInt(obj.in))
});

    height=Math.max.apply(Math, temp);
    height=height/10+height;
    //alert(height);

在图表中：

yAxis      : { 
            max : height,
            min : 0
        }

在这里摆弄

希望这就是您要寻找的

Answer 2

确定$.each()方法中的最大值。

然后在第一个（也是唯一一个）yAxis上调用setExtremes() ：

var maxy= 0;
$.each(myData, function(i, obj) {
   var d = new Date(obj.date)
   dataArray.push([Date.parse(d), parseInt(obj.in)])
   maxy= Math.max(maxy, obj.in);
});
chart.yAxis[0].setExtremes(0, maxy*1.10);

小提琴

Answer 3

您可以使用tickPositioner，它可以返回自定义的报价位置。

tickPositioner: function(min, max) {
            var positions = [1,2,3],
                maxPercent = max + 0.1 * max,
                tick = 0,
                increment = Math.ceil(maxPercent / 6) ;

            for (tick; tick <= max; tick += increment) {
                positions.push(tick);
            }

            positions.push(maxPercent);

            return positions;
        }

示例： http ： //jsfiddle.net/ot24zrkt/126/