用flot显示酒吧

时间:2013-11-19 21:48:13

标签: javascript jquery flot

使用我的xaxis刻度线

问题,只有第一个刻度显示在图表的最右侧,并且没有绘制条形图。我有一种感觉,我错过了一些明显的东西。

previous of graph

所需解决方案:显示所有xaxis刻度并相应绘制条形

相关代码:

$.plot($("#chart"), results, {
    grid: {
        hoverable: true,
        aboveData: true
    },
    xaxis: {
        ticks: [
            [1, "AL"],
            [2, "AZ"],
            [3, "CA"],
            [4, "CO"],
            [5, "CT"],
            [6, "DE"],
            [7, "FL"],
            [8, "GA"],
            [9, "HI"],
            [10, "IA"],
            [11, "IL"],
            [12, "IN"],
            [13, "KS"],
            [14, "KY"],
            [15, "LA"],
            [16, "MA"],
            [17, "MD"],
            [18, "ME"],
            [19, "MI"],
            [20, "MN"],
            [21, "MO"],
            [22, "MS"],
            [23, "NC"],
            [24, "NE"],
            [25, "NJ"],
            [26, "NM"],
            [27, "NY"],
            [28, "OH"],
            [29, "OK"],
            [30, "OR"],
            [31, "PA"],
            [32, "RI"],
            [33, "SC"],
            [34, "TN"],
            [35, "TX"],
            [36, "UT"],
            [37, "VA"],
            [38, "WA"],
            [39, "WV"]
        ],
        tickSize: 1,
        tickLength: 1
    },
    grid: {
        hoverable: true,
        clickable: false,
        borderWidth: 1
    },
    legend: {
        labelBoxBorderColor: "none",
        position: "ne",
        margin: [-100, 0]
    },
    series: {
        bars: {
            show: true,
            align: "center",
            horizontal: "true"
        }
    }
});

JSFiddle: http://jsfiddle.net/emaM7/

1 个答案:

答案 0 :(得分:2)

我认为问题可能只是您在数据中使用非数字X值。我在剧情调用之前添加了这段代码:

for (i = 0; i < results.length; i++) {
    for (j = 0; j < results[i].data.length; j++) {
        results[i].data[j][0] = j;
    }
}

用图表显示图表。

您可能希望使用稍微复杂的逻辑来为每个状态选择正确的数字代码,因为如果您在“结果”对象中缺少状态或无序状态,我写的内容将无效。