2

I've a classic line chart with weekly date for x-axis.

But if I put a lot of values, dates at the bottom are not readable (too close).

$(function () { 
$('#container').highcharts({ 
    xAxis: {
        tickInterval:  7 * 24 * 3600 * 1000,
        type: 'datetime', 
        labels: {
            format: '{value:%d/%m/%Y}',
            rotation: -45,
            y: 30,
            align: 'center'
        } 
    }, 
    plotOptions: {
        series: {
            pointStart: Date.UTC(2012, 4, 4),
            pointInterval: 7 * 24 * 3600 * 1000
        }
    },

    series: [{ 
        data: [29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4]
    }]
});

http://jsfiddle.net/mf9Eg/

Do you know if it's possible to have a intelligent distribution of these values? When they are too close, just display one on two for example.

Thanks.

4

2 回答 2

3

you can use step property of labels. try code below.

labels: {
            format: '{value:%d/%m/%Y}',
            rotation: -45,
            y: 30,
            align: 'center',
            step:3
        } 
于 2013-07-30T20:16:49.083 回答
0

What I normally do is determine how many data points I have and then adjust the tickInterval accordingly. You have it set to a hardcoded value. You will need to find out what works best for you depending on how many data points you have, your alignment/rotation of xAxis labels, and font used on those labels.

于 2013-07-30T17:50:40.677 回答