Question

我正在使用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] 然后乐队将正确呈现。

我的数据有一些缺失值。是否有任何方法可以为线上的非空数据点进行波段渲染，即使行还有一些空数据点？

Answer 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]
        }
    }]

当系列包含空值时，在jqplot中渲染band / bandData

1 个答案: