Flot.js中的条形图显示空值

时间:2013-10-30 23:04:23

标签: javascript charts flot

我试图让我的条形图显示一系列简单的数据。

它正确地显示数据,但是它正在填充网格,并且该范围之间存在零数据值。

查看图片。

$.plot($('#somediv'), result, {
    lines: {
        show: false
    },
    bars: {
        barWidth: 12,
        horizontal: false,
        align: "center",
        show: true,
        zero:false,
        fill:true,
        fillColor:'#fefefe',
    },        
    points: {
        show: false,
        symbol: "circle",
        fill: false
    },
    grid: {
        hoverable: true, 
        backgroundColor: '#fefefe', 
        borderColor: '#eee',
        borderWidth: 1,
        clickable: true
    },
    series: {
        lines: {
            show: false, 
            lineWidth: 1
        },
        shadowSize: 0
    },
    xaxis: {
        mode: null,

    },
    yaxis: {
        min: 0
    },
    selection: {
        mode: "y"
    },

});

这是数据

[{"label":"Sales","data":[["180","23"],["3","12"],["183","10"],["154","5"],["239","4"]]}]

,这是屏幕截图中的结果。

enter image description here

底部的数据系列是产品ID,y轴是每个产品的销售数量

我想要的是每个刻度显示1条,但我无法理解

中的文档

https://github.com/flot/flot/blob/master/API.md

1 个答案:

答案 0 :(得分:0)

Flot没有用空值填充网格;它正确地绘制了你给它的x值 - 180,3,183等。如果这些值实际上与轴上的位置不对应,则应该只使用1,2,3 ......而不是。