2013-10-04 31 views
1

我想要使用從1到20開始的線性刻度來格式化x軸刻度,然後我想用不同的值重新標記它們。這可能嗎?我沒有看到任何'ticklabel'字段。JQPlot設置刻度然後重新標記它們

我目前正在設置ticks:array的刻度,其中數組包含的數據不是由相同的值間隔。我想要做的是ticks:[1,2...20],然後用數組中的值標記刻度。

例如,現在,我的數組包含「100,121,125,128,140」等數據。我希望x軸均勻分佈,仍然顯示「100,121,125,128,140」。

下面是我使用的x軸的代碼:

xaxis : 
{ 
    tickRenderer : $.jqplot.CanvasAxisTickRenderer, 
    tickOptions : 
    { 
     angle : -90, 
     textColor : '#FFA500', 
     fontSize : '1em', 
     fontFamily : '"Trebuchet MS",Arial,Helvetica,sans-serif' 
    }, 
    label : "Value", 
    pad : 0, 
    min : minValue, 
    max : maxValue, 
    ticks : values, 
    autoscale : false 
} 

values是包含欲顯示在x軸上的值的數組,但我想的距離是在x軸

這裏的值相同的是整個事情:

var plot = $.jqplot (chartID ,[val1, val2, val3, val4, val5], 
     { 
      title: "5 Items" , 

       series:[ 
         { 
         label:val[0], 
         lineWidth:2, 
         markerOptions: { style:'dimaond' } 
         }, 
         { 
          label:val[1], 
          lineWidth:2, 
          markerOptions: { style:'dimaond' } 
         }, 
         { 
          label:val[2], 
          markerOptions: { style:"circle" } 
         } 
         , 
         { 
          label:val[3], 
          markerOptions: { style:"circle" } 
         } 
         , 
         { 
          label:val[4], 
          markerOptions: { style:"circle" } 
         } 
         ] 
         , 
       grid: { 
          background: '#fffdf6', 
          borderColor: '#999999'  
         },    

        axes: { 
         // options for each axis are specified in seperate 
         // option objects. 
         xaxis: { 
          tickRenderer: $.jqplot.CanvasAxisTickRenderer , 
          tickOptions: { 
           angle: -90, 
           textColor:'#FFA500', 
           fontSize:'1em', 
           fontFamily: '"Trebuchet MS",Arial,Helvetica,sans-serif' 
          }, 
         label: "Value", 
         pad: 0, 
         min:minValue, 
         max:maxValue, 
         renderer: $.jqplot.CategoryAxisRenderer, 
         ticks: values, 
         autoscale:false 
         }, 
         yaxis: {    
         min:minTime, 
         max:maxTime, 
          tickRenderer: $.jqplot.CanvasAxisTickRenderer , 
          tickOptions: { 
           formatString: "%#.2f", 
           textColor:'#FFA500', 
           fontSize:'1em', 
           fontFamily: '"Trebuchet MS",Arial,Helvetica,sans-serif' 
          } 
         } 
       }, 
       legend:{ 
        show:true, 
        location:'se', 
        labels:vals, 
        placement:"insideGrid" 
       } 
     }); 
+0

能否請您分享您的代碼或任何截圖? – Gyandeep

+0

@Gyandeep,我添加了代碼。 – sportsfan72

回答

0

我認爲使用$.jqplot.CategoryAxisRenderer可以解決您的問題。 請將jqplot.CategoryAxisRenderer.js文件添加到您的頁面。

Eample你的問題:jsFiddle Link

例子:jsFiddle Link

xaxis : 
{ 
    tickRenderer : $.jqplot.CanvasAxisTickRenderer, 
    tickOptions : 
    { 
     angle : -90, 
     textColor : '#FFA500', 
     fontSize : '1em', 
     fontFamily : '"Trebuchet MS",Arial,Helvetica,sans-serif' 
    }, 
    label : "Value", 
    pad : 0, 
    min : minValue, 
    max : maxValue, 
    renderer: $.jqplot.CategoryAxisRenderer, 
    ticks : values, 
    autoscale : false 
} 
+0

這似乎修復了x軸縮放比例,但我現在沒有任何一行顯示。 – sportsfan72

+0

@ sportsfan72請使用我的答案jsFiddle鏈接,它會幫助你解決這個問題。 – Gyandeep

+0

我已經看過它,但我不知道爲什麼在添加該行代碼後,現在沒有值顯示在線上。你有什麼主意嗎?如果有幫助,我已經添加了我的y軸代碼。 – sportsfan72

0

與嘗試tickOptions - showLabel: '真'

ticks: [],  // a 1D [val1, val2, ...], or 2D [[val, label], [val, label], ...] 
        // array of ticks to use. Computed automatically. 
numberTicks: undefined, 

tickOptions: { 
     mark: 'outside', // Where to put the tick mark on the axis 
          // 'outside', 'inside' or 'cross', 
     showMark: true, 
     showGridline: true, // wether to draw a gridline (across the whole grid) at this tick, 
     markSize: 4,  // length the tick will extend beyond the grid in pixels. For 
          // 'cross', length will be added above and below the grid boundary, 
     show: true,   // wether to show the tick (mark and label), 
     showLabel: true, // wether to show the text label at the tick, 
     formatString: '', // format string to use with the axis tick formatter 
    } 
+0

我更新了這個問題,「現在,我的數組包含像」100,121,125,128,140「這樣的數據。我希望x軸被均勻間隔,並仍然顯示」100,121,125,128, 140" 。」我可以顯示刻度,但是如果我用線性刻度來做,我的間距很好,但標籤不是我想要它們的,如果我使用我的數組,標籤很好,但圖形上的間距不是我想要的。 – sportsfan72