空点highcharts / highstock

时间:2014-02-12 14:03:07

标签: highcharts highstock

我有一组不规则的空数据,但我无从知晓。 有没有办法在图表上突出显示它们?

示例:http://i.stack.imgur.com/fzZ4f.jpg

我使用xAxis: {ordinal: false}作为图表行,但我需要突出显示空点,例如:http://i.stack.imgur.com/xTZbZ.jpg

在该系列中,缺少点,并且不会收到零点。我不能设置为null。带图表的代码脚本:

// Example data:
data = [[x1,y1],[x2,y2],[x6,y6]]; // x3,x4 and x5 are missing.

function changeData(min, max) {
    var chart = $('#{{div_id}}').highcharts();
    chart.showLoading('Actualizando datos...');
    var params = {type:'{{type}}', id: '{{id}}', from: min, to: max};
    $.post("{{url('dashboardmetric')}}", {metric: 'getDataGraphMetric', params: params},
    function(data) {
        $.each(data, function(i, v){
            chart.series[i].setData(data[i], true);  //Seteo de datos de la serie
        });
        chart.hideLoading();  //Se libera el bloquero
    }, "json");
}

$(function() {
    Highcharts.setOptions({ 
        lang: {
            months: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
            shortMonths: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
            weekdays: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado']
        },
        global: {
            useUTC: false
        }
    });

    $('#{{div_id}}').highcharts('StockChart', {
        chart: {
        borderColor: '#DDDDDD',
        borderWidth: 1,
        borderRadius: 10
    },
        title: {
            text: '{{title}}'
        },
        credits: {
            enabled: false
        },
        navigator: {//Es la serie historica y completa
            adaptToUpdatedData: false,
            height: 45,
            series: {data: {{navigator}}}
        },
        scrollbar: {
            liveRedraw: false
        },
        rangeSelector: {
            buttons: [{type: 'hour',  count: 6,  text: '6H'},
                      {type: 'day',  count: 1,  text: '1D'}, 
                      {type: 'day',  count: 2,  text: '2D'}, 
                      {type: 'week', count: 1,  text: '1S'}, 
                      {type: 'month',count: 1,  text: '1M'}, 
                      {type: 'year', count: 1,  text: '1A'}, 
                      {type: 'year', count: 2,  text: '2A'}, 
                      {type: 'all',text: 'Todo'}]
        },
        xAxis: {
            ordinal: false,
            events: {
                setExtremes: function(e) {
                    changeData(e.min, e.max);
                }
            }
        },
        yAxis: {
            min: 0
        },
        plotOptions: {
            series: {
                lineWidth: 1,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                marker: {
                    enabled: false,
                    lineWidth: 1,
                    states: {
                        hover: {
                            enabled: false
                        }
                    }
                }
            }
        },
        tooltip: {
            formatter: function() {
                    shortMonths = new Array('Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic');
                    weekdays = new Array('Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado');

                    var date = new Date(this.x);
                    num_day = date.getDate();
                    index_weekday = date.getDay();
                    index_shortMonths = date.getUTCMonth();

                    if(date.getHours() < 10) {h = "0" + date.getHours();} else {h = date.getHours();}
                    if(date.getMinutes() < 10) {m = "0" + date.getMinutes();} else {m = date.getMinutes();}

                    var s = '<span style="font-size:10px">' + weekdays[index_weekday] + ', ' + shortMonths[index_shortMonths] + ' ' + num_day + ', ' + h + ':' + m + '</span>';
                    $.each(this.points, function(i, point) {
                        bits = point.y;
                        if(bits>=1000000000) {bits=(bits/1000000000).toFixed(2)+' Gb';}
                        else if(bits>=1000000)    {bits=(bits/1000000).toFixed(2)+' Mb';}
                        else if(bits>=1000)       {bits=(bits/1000).toFixed(2)+' Kb';}
                        else if(bits>1)           {bits=bits+' bits';}
                        else if(bits==1)          {bits=bits+' bit';}
                        else                      {bits='0 bits';}

                        serie = point.series;
                        s += '<br/><span style="color:'+serie.color+'">'+ serie.name +'</span>: <b>'+ bits +'</b>';
                    });

                    return s;
                },
            borderColor: '#FFA500',
            valueDecimals: 0
            {# valueSuffix: ' {{unit}}' #}
        },
        series: [
                {% for serie in series %}
                { 
                    name: '{{serie.name | raw}}',
                    data:  {{serie.data}},
                    color: '{{serie.color | raw}}',
                    marker: {
                       symbol: '{{serie.symbol | raw}}'
                    }
                },  
                {% endfor %}
                ]
    });
});

0 个答案:

没有答案