Question

我正在使用jquery flot创建条形图。我使用orderBars插件来获取单独的条形图。我的代码如下，

var data2 = [
    {
        label: "Product 1",
        data: [["1","3"],["2","3"],["3","5"],["4","8"],["5","9"]],
        bars: {
            show: true,
            barWidth: 0.1,
            fill: true,
            lineWidth: 1,
            order: 1,
            fillColor:  "#AA4643"
        },
        color: "#AA4643"
    },
    {
        label: "Product 2",
        data: [["1","3"],["2","3"],["3","3"],["4","1"],["5","3"]],
        bars: {
            show: true,
            barWidth: 0.1,
            fill: true,
            lineWidth: 1,
            order: 2,
            fillColor:  "#89A54E"
        },
        color: "#89A54E"
    },
    {
        label: "Product 3",
        data: [["1","40"],["2","3"],["3","3"],["4","7"],["5","3"]],
        bars: {
            show: true,
            barWidth: 0.1,
            fill: true,
            lineWidth: 1,
            order: 3,
            fillColor:  "#4572A7"
        },
        color: "#4572A7"
    },

];

$.plot($("#placeholder"), data2, {
    xaxis: {
        min: 1,
        max: 5,
        mode: "categories",
        tickSize: [['1',"TTE"],['2',"SEBP"],['3',"LSS"],['4',"TMBP"],['5',"MPI"]],

    },
    yaxis: {
        axisLabel: 'Value',
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
        axisLabelPadding: 5
    },
    grid: {
        hoverable: true,
        clickable: false,
        borderWidth: 1
    },
    legend: {
        labelBoxBorderColor: "none",
        position: "right"
    },
    series: {
        shadowSize: 1
    }
});

   });

我将图表视为空白

和x轴错误显示为2,3,4,5，-0.16。任何人请帮忙...

Answer 1

将x轴选项更改为

xaxis: {
    min: -0.5,
    max: 4.5,
    mode: "categories",
    ticks: [['0',"TTE"],['1',"SEBP"],['2',"LSS"],['3',"TMBP"],['4',"MPI"]]
},

您错误地命名了ticks数组，这些标记从零开始（不是基于一个），您需要更宽的限制，以便显示所有条形。
看到这个小提琴：http://jsfiddle.net/y9newLmz/2/

Jquery Flot条形图未显示正确的值

1 个答案: