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

Question

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

我目前正在設置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" 
       } 
     }); 

Answer 1

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

Answer 2

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