简体   繁体   中英

Highcharts line charts not displaying all the dates

I have a line chart that displays the data from a Google Spreadsheet, the datetime data is being updated every 3 to 4 seconds and I want the chart to only display some of it, like the hour for example. I can't use any of the highstocks funcionalities because it doesn't support the Google Spreadsheet service, at least that I know and feeding the CSV or JSON to highchart doesnt update automatically. Again, as far as I know.

So I'm stuck with Highcharts line chart, but I dont want the X axis to look so crowded. Take a look at the fiddle. http://jsfiddle.net/AYYCv/167/light/ And there's only little data.

Highcharts.setOptions({
chart: {
    zoomType: 'x'
},
plotOptions: {
    series: {
        visible: false,
    }

},
    legend: {
    enabled: true,
    align: 'right',
    backgroundColor: '#FFFFFF',
    borderColor: 'white',
    borderWidth: 2,
    layout: 'vertical',
    verticalAlign: 'top',
    y: 100,
},
title: {
    text: 'Produccion de Energía Solar'
},
xAxis: {
    type: 'datetime'
},
yAxis: {
    title: {
        text: 'Magnitud'
    }
}

});
$('#container4').highcharts({
data: {
    googleSpreadsheetKey: '0Aj8kPfvDA7mOdHpVMDVFbktmM0E4YjFIUkVUVC1RYlE'
},
plotOptions: {
    series: {
        visible: false
    }
}
 function(chart) {
chart.series[0].show();   
});`

您可以增加tickInterval参数

Change the XAxis like this... It will rotate labels to specified degrees

xAxis: {
    type: 'datetime', labels:{rotation: -40}
  },

Thisl link helps for date formating http://api.highcharts.com/highstock#xAxis.dateTimeLabelFormats

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