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

尝试使用 - showLabel：'true'

的tickOptions

 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
    }

Answer 2

我认为使用$.jqplot.CategoryAxisRenderer可以解决您的问题。请将jqplot.CategoryAxisRenderer.js文件添加到您的页面中。

您的问题的示例：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
}

JQPlot设置滴答，然后重新标记它们

2 个答案: