Визуализировать полосы/bandData в jqplot, когда серия содержит нулевые значения

Я использую jqplot для отображения линейного графика.

Данные моей серии выглядят так:

results =[  
    ['1/1/2014', 1000],
    ['2/1/2014', 2000],
    ['3/1/2014', 3000],
    ['4/1/2014', 4000],
    ['5/1/2014', null]
];

мой вызов jqplot выглядит примерно так

$.jqplot('myChart', results, 
{
   series: [
        {
            rendererOptions: {
                bands: {
                    show: true,
                    interval: '10%'
                },
            }
        }
   ]
});

Диаграмма отобразится, но в ней будут отсутствовать полосы по 10 % выше и ниже.

Если я изменю нулевое значение ['5/1/2014', null] на ['5/1/2014', 5000], тогда полосы будут отображаться правильно.

Мои данные имеют некоторые пропущенные значения. Есть ли способ заставить полосы отображать ненулевые точки данных на линии, даже если в строке есть некоторые нулевые точки данных?


person MattEvansDev    schedule 29.05.2014    source источник


Ответы (1)


Вместо отправки null для этих значений полностью опустите их и полагайтесь на dateAxisRenderer для правильного размещения значений на оси.

results = [
    ['1/1/2014', 1000],
    ['2/1/2014', 2000],
    ['3/1/2014', 3000],
    ['4/1/2014', 4000],
    ['6/1/2014', 3500]
];

$.jqplot ('myChart', [results],
{
    series: [{
        rendererOptions: {
            bands: {
                show: true,
                interval: '10%'                    
            }
        }
    }],
    axes: {
        xaxis: {
            renderer: $.jqplot.DateAxisRenderer
        }
    }
});

Версия JSFiddle здесь (не забудьте дополнительную ссылку на скрипт для dateAxisRenderer) http://jsfiddle.net/4vmNf/1/

В качестве альтернативы вы можете передавать отдельные массивы для данных верхней и нижней полосы, и это не обязательно должно следовать тем же интервалам, что и базовый массив данных.

lowerBand = [];
upperBand = [];

for(var i = 0; i < results.length; i++) {
    if (results[i][1]) {
        lowerBand.push([results[i][0], results[i][1] * 0.9]);
        upperBand.push([results[i][0], results[i][1] * 1.1]);
    } else {
        // not clear to me how you want to calculate band for missing values
        lowerBand.push([results[i][0], 3500]);
        upperBand.push([results[i][0], 6500]);
    }
}

А затем используйте опцию bandData:

series: [{
        rendererOptions: {
            bandData: [lowerBand, upperBand]
        }
    }]
person explunit    schedule 29.05.2014