如何用jquery flot orderbar顯示帶xaxis浮點值的條？

我使用pikemere>定製條形圖提供的代碼。如何用jquery flot orderbar顯示帶xaxis浮點值的條？
該示例正常工作。我想在xaxis浮點值中使用，而不是像示例中那樣使用時間戳。我嘗試使用以下代碼，但條形圖顯示不正確。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Flot Bar Chart</title> 

<style type="text/css"> 
body { font-family: Verdana, Arial, sans-serif; font-size: 12px; } 
#placeholder { width: 450px; height: 200px; position: relative; margin: 0 auto; } 
.legend table, .legend > div { height: 82px !important; opacity: 1 !important; right: -55px; top: 10px; width: 116px !important; } 
.legend table { border: 1px solid #555; padding: 5px; } 
#flot-tooltip { font-size: 12px; font-family: Verdana, Arial, sans-serif; position: absolute; display: none; border: 2px solid; padding: 2px; background-color: #FFF; opacity: 0.8; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; } 
</style> 

<!--[if lte IE 8]><script type="text/javascript" language="javascript" src="excanvas.min.js"></script><![endif]--> 
<script type="text/javascript" language="javascript" src="../jquery-1.7.1.min.js"></script> 
<script type="text/javascript" language="javascript" src="../jquery.flot.js"></script> 
<script type="text/javascript" language="javascript" src="../jquery.flot.axislabels.js"></script> 
<script type="text/javascript" language="javascript" src="../jquery.flot.orderBars.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    var d1_1 = [ 
     [1.0, 120], 
     [2.0, 70], 
     [3.0, 100], 
     [4.0, 60], 
     [5.0, 35] 
    ]; 

    var d1_2 = [ 
     [1.0, 80], 
     [2.0, 60], 
     [3.0, 30], 
     [4.0, 35], 
     [5.0, 30] 
    ]; 

    var d1_3 = [ 
     [1.0, 80], 
     [2.0, 40], 
     [3.0, 30], 
     [4.0, 20], 
     [5.0, 10] 
    ]; 

    var d1_4 = [ 
     [1.0, 15], 
     [2.0, 10], 
     [3.0, 15], 
     [4.0, 20], 
     [5.0, 15] 
    ]; 

    var data1 = [ 
     { 
      label: "Product 1", 
      data: d1_1, 
      bars: { 
       show: true, 
       barWidth: 12*24*60*60*300, 
       fill: true, 
       lineWidth: 1, 
       order: 1, 
       fillColor: "#AA4643" 
      }, 
      color: "#AA4643" 
     }, 
     { 
      label: "Product 2", 
      data: d1_2, 
      bars: { 
       show: true, 
       barWidth: 12*24*60*60*300, 
       fill: true, 
       lineWidth: 1, 
       order: 2, 
       fillColor: "#89A54E" 
      }, 
      color: "#89A54E" 
     }, 
     { 
      label: "Product 3", 
      data: d1_3, 
      bars: { 
       show: true, 
       barWidth: 12*24*60*60*300, 
       fill: true, 
       lineWidth: 1, 
       order: 3, 
       fillColor: "#4572A7" 
      }, 
      color: "#4572A7" 
     }, 
     { 
      label: "Product 4", 
      data: d1_4, 
      bars: { 
       show: true, 
       barWidth: 12*24*60*60*300, 
       fill: true, 
       lineWidth: 1, 
       order: 4, 
       fillColor: "#80699B" 
      }, 
      color: "#80699B" 
     } 
    ]; 

    $.plot($("#placeholder"), data1, { 
     xaxis: { 
      min: 0.0, 
      max: 6.0, 
      mode: null, 
      ticks: [1.0, 2.0, 3.0, 4.0, 5.0], 
      tickLength: 0, // hide gridlines 
      axisLabelUseCanvas: true, 
      axisLabelFontSizePixels: 12, 
      axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif', 
      axisLabelPadding: 5 
     }, 
     yaxis: { 
      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 
     } 
    }); 

    function showTooltip(x, y, contents, z) { 
     $('<div id="flot-tooltip">' + contents + '</div>').css({ 
      top: y - 20, 
      left: x - 90, 
      'border-color': z, 
     }).appendTo("body").show(); 
    } 

    $("#placeholder").bind("plothover", function (event, pos, item) { 
     if (item) { 
      if (previousPoint != item.datapoint) { 
       previousPoint = item.datapoint; 
       $("#flot-tooltip").remove(); 

       var originalPoint; 

       if (item.datapoint[0] == item.series.data[0][3]) { 
        originalPoint = item.series.data[0][0]; 
       } else if (item.datapoint[0] == item.series.data[1][3]){ 
        originalPoint = item.series.data[1][0]; 
       } else if (item.datapoint[0] == item.series.data[2][3]){ 
        originalPoint = item.series.data[2][0]; 
       } else if (item.datapoint[0] == item.series.data[3][3]){ 
        originalPoint = item.series.data[3][0]; 
       } else if (item.datapoint[0] == item.series.data[4][3]){ 
        originalPoint = item.series.data[4][0]; 
       } 

       var x = originalPoint; 
       y = item.datapoint[1]; 
       z = item.series.color; 

       showTooltip(item.pageX, item.pageY, 
        "<b>" + item.series.label + "</b><br /> " + x + " = " + y, 
        z); 
      } 
     } else { 
      $("#flot-tooltip").remove(); 
      previousPoint = null; 
     } 
    }); 
}); 
</script> 
</head> 

<body> 
    <div id="placeholder"></div> 
</body> 
</html>
有人可以說出了什麼問題嗎？謝謝！
來源
2013-05-21 user1940268
如何用jquery flot orderbar顯示帶xaxis浮點值的條？

回答

相關問題
