1

x 軸の目盛りをフォーマットするために 1 から 20 までの線形スケールを使用したいのですが、別の値でラベルを付け直したいと考えています。これは可能ですか？「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
}

valuesx軸に表示したい値を含む配列ですが、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

$.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 に答える