我需要一个实时的日内图表,其中x轴预先定义为30分钟的间隔

时间:2016-12-18 10:16:41

标签: highcharts highstock

我正在研究实时图表,我需要预先定义的x轴为9:30,10:00,10:30,11:00,11:30,12:00,12:30 < / p>

它将Db中的数据分别作为[x,y]值和图表上的addpoint。像数据[10:24,350]必须正确地指向图表。

   $(function () {
    //end = (new Date()).getTime() + 100000; 
    $.getJSON('/Charts/Get/Home.aspx', function (data) {
        var d = new Date();
        var o = d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate();
        var p = new Date(o).getTime();
        Highcharts.stockChart('chartContainer', {
            chart: {
                events: {
                    load: function () {
                        // set up the updating of the chart each second
                        var series = this.series[0];
                        setInterval(function () {
                            requestData(series);
                        }, 60000);
                    }
                }
            },
            scrollbar: {
                enabled: false
            },
            xAxis: {
                tickInterval: 3600 * 1000,
                min: min.getUTCDate(),
                max: Date.UTC(2016, 12, 19),
                type: 'datetime',   
                startOnTick: false,
                endOnTick: false,
                ordinal: false,
                dateTimeLabelFormats: {
                    day: '%M'
        }
            },
            navigator: { enabled: false },
            title: {
                text: 'Interactive Chart'
            },
            exporting:{
                enabled: false
            },
            rangeSelector: {
               enabled: false
            },

            series: [{
                name: '',
                type: 'line',
                data: data,
                tooltip: {
                    valueDecimals: 2
                },
                fillColor: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 0,
                        y2: 1
                    },
                    stops: [
                        [0, Highcharts.getOptions().colors[0]],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                    ]
                },

            }]
        });
    });
});[1]

like this chart

1 个答案:

答案 0 :(得分:0)

 today = new Date();
                        dd = today.getUTCDate();
                        mm = today.getUTCMonth() + 1;
                        yyyy = today.getUTCFullYear();
                        min = yyyy + '-' + mm + '-' + dd + ' 15:00:00';
                        max = yyyy + '-' + mm + '-' + dd + ' 18:00:00';
                        d = new Date(Date.parse(min));
                        m = d.getTime();
                        e = new Date(Date.parse(max));
                        n = e.getTime()

                        var chart; // global
                        function requestData(series) {
                            $.ajax({
                                url: '/Charts/Get/Home.aspx?r=upd',
                                success: function (point) {
                                    point = $.parseJSON(point)
                                    shift = series.data.length > 20; // shift if the series is  
                                    series.addPoint(point, true, shift);
                                },
                                cache: false
                            });
                        }

                        $(function () {
                            $.getJSON('/Charts/Get/Home.aspx', function (data) {
                                Highcharts.stockChart('chartContainer', {
                                    chart: {
                                        events: {
                                            load: function () {
                                                var series = this.series[0];
                                                setInterval(function () {
                                                    requestData(series);
                                                }, 60000);
                                            }
                                        }
                                    },
                                    xAxis: {
                                        type: 'datetime',
                                        tickInterval: 0.5 * 3600 * 1000,
                                        minorTickInterval: 0.1 * 3600 * 1000,
                                        startOnTick: false,
                                        endOnTick: false,
                                        ordinal: false,
                                        min:m,
                                        max:n,
                                        dateTimeLabelFormats: {
                                            minute: '%H:%M'
                                        }
                                    },
                                    scrollbar: {
                                        enabled: false
                                    },
                                    rangeSelector: {
                                        enabled: false
                                    },
                                    navigator: {
                                        enabled: false
                                    },
                                    title: {
                                        text: ' '
                                    },
                                    exporting: {
                                        enabled: false
                                    },
                                    credits: {
                                        enabled: false
                                    },
                                    series: [{
                                        name: '',
                                        type: 'line',
                                        data: data,
                                        tooltip: {
                                            valueDecimals: 2
                                        },
                                        fillColor: {
                                            linearGradient: {
                                                x1: 0,
                                                y1: 0,
                                                x2: 0,
                                                y2: 1
                                            },
                                            stops: [
                                                [0, Highcharts.getOptions().colors[0]],
                                                [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                                            ]
                                        },

                                    }]
                                });
                            });
                        });