简体   繁体   中英

how to set max min on highcharts dynamically

I'm trying to set the xAxis in highcharts to have the max equal today's date and the min equal to 7 days prior. So it will always show 7 dates even if there isn't a data point for a given date.

The data is displaying correctly, just the min and max break it.

here's the script - http://jsfiddle.net/Jv82q/1/ - notice line 3 is commented out, when uncommented it breaks the chart. Not sure why.

 var max = new Date().getTime();
var min = new Date().getTime();
// min.setDate(min.getDate()-7);
$(function () { 
$('#container').highcharts({
    chart: {
        type: 'areaspline'
    },
    title: {
        text: 'Weight History'
    },
    credits: {
        enabled: false
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
            day: '%e %b'
        },
        min: min,
        max: max
    },
    yAxis: {
        title: {
            text: 'Weight'
        },
        min: 20,
        max: 400
    },
    series: [{
        name: 'Daily Weigh In',
        color: '#7ec152',
        data: [[Date.UTC(2014,  3, 13), 400],[Date.UTC(2014,  3, 14), 300],[Date.UTC(2014,  3, 15), 300],[Date.UTC(2014,  3, 16), 300],[Date.UTC(2014,  3, 18), 300],[Date.UTC(2014,  3, 19), 300],[Date.UTC(2014,  3, 20), 300]        ]
    }]
});
});

Date.getTime() returns timestamp, not Date object. Then you are truing to setDate for min , but it return error in your JS console:

Uncaught TypeError: undefined is not a function 

Here is example how to achieve that: http://jsfiddle.net/Jv82q/4/

var today = new Date().getTime();

...

// axis options: 
min: today - 7 * 24 * 3600 * 1000,
max: today

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM