1

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

2 回答 2

0

使用 - showLabel 尝试 tickOptions : 'true'

 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-04T14:10:29.303 回答
0

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

您的问题示例：jsFiddle Link

示例：jsFiddle 链接

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-10T14:36:08.607 回答