JQPlot設置刻度然後重新標記它們

我想要使用從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" 
       } 
     });

來源

2013-10-04 sportsfan72

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

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

我認爲使用$.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 
}

來源

2013-10-10 14:36:08 Gyandeep

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

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

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

與嘗試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 
    }

來源

2013-10-04 14:10:29

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

JQPlot設置刻度然後重新標記它們

回答

相關問題