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

Question

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

它正确显示数据，但是它用范围之间确实存在的零数据值填充网格。

看图片。

$.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"]]}]

这是屏幕截图中的结果。

底部的数据系列是产品ID，y轴是每个产品的销售额#

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

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

Answer 1

Flot 没有用空值填充网格；它正确地绘制了您给它的 x 值 - 180、3、183 等。如果这些值实际上不对应于轴上的位置，您应该简单地使用 1、2、3、... 来代替。