jQuery的海軍報圖：要顯示在X軸上天

Question

我有一個JQuery海軍報圖：

HTML

   <div class="col-md-6 col-sm-12"> 
        <!-- BEGIN PORTLET--> 
        <div class="portlet"> 
         <div class="portlet-title"> 
          <div class="caption"> 
           <i class="icon-bar-chart"></i>Visitors 
          </div> 
         </div> 
         <div class="portlet-body"> 
          <div id="site_statistics_loading"> 
           <img src="assets/img/loading.gif" alt="loading"/> 
          </div> 
          <div id="site_statistics_content" class="display-none"> 
           <div id="site_statistics" class="chart"> 
           </div> 
          </div> 
         </div> 
        </div> 
        <!-- END PORTLET--> 
       </div> 

JS

 initCharts: function() { 
      if (!jQuery.plot) { 
       return; 
      } 

      var data = []; 
      var totalPoints = 250; 

      // random data generator for plot charts 

      function getRandomData() { 
       if (data.length > 0) data = data.slice(1); 
       // do a random walk 
       while (data.length < totalPoints) { 
        var prev = data.length > 0 ? data[data.length - 1] : 50; 
        var y = prev + Math.random() * 10 - 5; 
        if (y < 0) y = 0; 
        if (y > 100) y = 100; 
        data.push(y); 
       } 
       // zip the generated y values with the x values 
       var res = []; 
       for (var i = 0; i < data.length; ++i) res.push([i, data[i]]) 
       return res; 
      } 

      function showTooltip(title, x, y, contents) { 
       $('<div id="tooltip">' + contents + '</div>').css({ 
          position: 'absolute', 
          display: 'none', 
          top: y + 5, 
          left: x + 15, 
          border: '1px solid #333', 
          padding: '4px', 
          color: '#fff', 
          'border-radius': '3px', 
          'background-color': '#333', 
          opacity: 0.80 
         }).appendTo("body").fadeIn(200); 
       } 

      var Last_Week = [ 
       [1, 3], 
       [2, 345], 
       [3, 34], 
       [4, 234], 
       [5, 435], 
       [6, 458], 
       [7, 879] 
      ]; 

      var This_Week = [ 
       [1, 134], 
       [2, 789], 
       [3, 423], 
       [4, 416], 
       [5, 489], 
       [6, 157], 
       [7, 340] 
      ]; 

      if ($('#site_statistics').size() != 0) { 

       $('#site_statistics_loading').hide(); 
       $('#site_statistics_content').show(); 

       var plot_statistics = $.plot($("#site_statistics"), [{ 
         data: Last_Week, 
         label: "Last Week" 
        }, { 
         data: This_Week, 
         label: "This Week" 
        } 
       ], { 
        series: { 
         lines: { 
          show: true, 
          lineWidth: 2, 
          fill: true, 
          fillColor: { 
           colors: [{ 
             opacity: 0.05 
            }, { 
             opacity: 0.01 
            } 
           ] 
          } 
         }, 
         points: { 
          show: true 
         }, 
         shadowSize: 2 
        }, 
        grid: { 
         hoverable: true, 
         clickable: true, 
         tickColor: "#eee", 
         borderWidth: 0 
        }, 
        colors: ["#d12610", "#37b7f3", "#52e136"], 
        xaxis: { 
         ticks: 11, 
         tickDecimals: 0 
        }, 
        yaxis: { 
         ticks: 11, 
        } 
       }); 

       var previousPoint = null; 
       $("#site_statistics").bind("plothover", function (event, pos, item) { 
        $("#x").text(pos.x.toFixed(2)); 
        $("#y").text(pos.y.toFixed(2)); 
        if (item) { 
         if (previousPoint != item.dataIndex) { 
          previousPoint = item.dataIndex; 

          $("#tooltip").remove(); 
          var x = item.datapoint[0].toFixed(0), 
           y = item.datapoint[1].toFixed(0); 

          showTooltip('', item.pageX, item.pageY, item.series.label + "&nbsp;" + y); 
         } 
        } else { 
         $("#tooltip").remove(); 
         previousPoint = null; 
        } 
       }); 
      }    

      if ($('#load_statistics').size() != 0) { 
       //server load 
       $('#load_statistics_loading').hide(); 
       $('#load_statistics_content').show(); 

       var updateInterval = 30; 
       var plot_statistics = $.plot($("#load_statistics"), [getRandomData()], { 
       series: { 
        shadowSize: 1 
       }, 
       lines: { 
        show: true, 
        lineWidth: 0.2, 
        fill: true, 
        fillColor: { 
         colors: [{ 
           opacity: 0.1 
          }, { 
           opacity: 1 
          } 
         ] 
        } 
       }, 
       yaxis: { 
        min: 0, 
        max: 100, 
        tickFormatter: function (v) { 
         return v + "%"; 
        } 
       }, 
       xaxis: { 
        show: false, 
       }, 
       colors: ["#e14e3d"], 
       grid: { 
        tickColor: "#a8a3a3", 
        borderWidth: 0 
       } 
       }); 

       function statisticsUpdate() { 
       plot_statistics.setData([getRandomData()]); 
       plot_statistics.draw(); 
       setTimeout(statisticsUpdate, updateInterval); 

       } 

       statisticsUpdate(); 

       $('#load_statistics').bind("mouseleave", function() { 
        $("#tooltip").remove(); 
       }); 
      } 

所以，我的問題是我想顯示日子而不是{1,2,3,4,5,6,7}。我試圖做到這一點：

var Last_Week = [ 
       ["Sun", 3], 
       ["Mon", 345], 
       ["Tue", 34], 
       ["Wed", 234], 
       ["Thu, 435], 
       ["Fri", 458], 
       ["Sat", 879] 
      ]; 

var This_Week = [ 
       ["Sun", 134], 
       ["Mon", 789], 
       ["Tue", 423], 
       ["Wed", 416], 
       ["Thu", 489], 
       ["Fri", 157], 
       ["Sat", 340] 
      ]; 

但它告訴我這一點：

它的意思是我錯了地方。你能幫我麼 ？

Answer 1

而不是定義爲你的x軸（ticks: 11,）指定蜱的array with the labels一些蜱（並保持與數據的數字，這是一個must）：

ticks: [[1, "Sun"], [2, "Mon"], [3, "Tue"], ...]