2015-02-06 94 views
1

我创建使用jQuery flot.I条形图使用了orderBars插件来获得个人bars.My代码如下,jQuery的海军报条形图显示不正确的值

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.Anyone请帮错了...

回答

0

更改您的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/