Flot.js欄和行不能移動

我對flot.js很陌生。我嘗試用同一個圖中的一條和一條線繪製自己的圖。 X軸爲月份（1月至12月），左側的y 1爲條形圖顯示數據，右側的y 2爲折線圖。Flot.js欄和行不能移動

這是我的代碼，我嘗試了幾次，檢查現有的教程，但無法使其正確繪圖。

有人可以指出我，非常感謝。

<style type="text/css"> 
    #flotcontainer { 
     width: 600px; 
     height: 200px; 
     text-align: center; 
     margin: 0 auto; 
    } 
    </style> 


    <!-- Javascript --> 
    <script type="text/javascript"> 


    var ticks = [ 
     [1, "Jan"], [2, "Feb"], [3, "Mar"], [4, "Apr"], [5, "May"], [6, "Jun"], 
     [7, "Jul"], [8, "Aug"], [9, "Sep"], [10, "Oct"], [11, "Nov"],   [12, "Dec"] 
    ]; 

    var s3 = [[1, 6.8], [2, 11.9], [3, 20.9], [4, 24], [5, 31], 
      [6, 38], [7, 43], [8, 51], [9, 57.3], [10, 62.2], [11, 64.7], [12, 70.8]]; 
    var s4 = [[1, 6.8], [2, 5.1], [3, 9], [4, 3.1], [5, 6], 
      [6, 7], [7, 5], [8, 8], [9, 6.3], [10, 4.9], [11, 2.5], [12, 6.1]]; 

    $(function() {   
     $.plot($("#flotcontainer"), 
      [ 
       { 
        data: s3, 
        label: "Page View", 
        bars: { 
        show: true, 
        barWidth: 12*24*60*60*1000, 
        fill: true, 
        lineWidth: 1 
       }, 

       }, 
       { 
        data: s4, 
        label: "Online User", 
        points: { show: true }, 
        lines: { show: false}, 
        yaxis: 2 
       } 
      ], 
      {    
       grid: { 
        backgroundColor: { colors: ["#D1D1D1", "#7A7A7A"] } 
       }, 
       xaxis: { 
        ticks: ticks, 
           tickSize: [1, "month"], 
       axisLabel: "Months", 
       }, 
       yaxes: [ 
        { 
         /* First y axis */ 
         position: "right" 
        }, 
        { 
         /* Second y axis */ 
         position: "left" /* left or right */ 
        } 
       ]  
      } 
     ); 
    }); 
    </script> 

    <!-- HTML --> 
    <div id="flotcontainer"></div>

來源

2015-10-19 pureblackheart

您barwidth只是更改爲1或更小的類似值（見本fiddle爲例子）：

bars: { 
     show: true, 
     barWidth: 1, //12 * 24 * 60 * 60 * 1000, 
     fill: true, 
     lineWidth: 1 
    },

你的酒吧是如此廣泛，他們擠在圖表的左邊的所有數據。如果使用時間模式（並相應地更改了數據），則使用的寬度是正確的。

這是一個second version of the fiddle，其中條形中心對齊並且您寫的線條圖（您最初只有一個沒有直線的點圖）。

來源

2015-10-19 12:24:41 Raidri

現在工作，謝謝:)。我試圖找到關於如何使用但沒有太多我能理解的文檔。 – pureblackheart

Flot.js欄和行不能移動

回答

相關問題