2013-07-07 37 views
0

我想在jqPlot圖表渲染器上提供tickInterval以在x軸上獲得線性分佈。在jqplot折線圖上獲取線性分佈

$.jqplot.config.enablePlugins = true; 
    var chartData = [[1, 224], [3, 672], [5, 1120],[15,2240]]; 

    function PlotChart(chartData) { 


    var plot2 = $.jqplot('chart1', [chartData], { 
     title: 'Mouse Cursor Tracking', 
     seriesDefaults: { 
      renderer: $.jqplot.CanvasAxisLabelRenderer, 
      rendererOptions: { 
       smooth: true 
      }, 
      pointLabels: { 
       show: true 
      } 
     }, 
     axes: { 
      xaxis: { 
       label: 'Number of Cookies', 
       renderer: $.jqplot.CategoryAxisRenderer, 
       // renderer to use to draw the axis,  
       tickOptions: { 
        formatString: '%d' 
       } 
      }, 
      yaxis: { 
       label: 'Calories', 
       tickOptions: { 
        formatString: '%.2f' 
       } 
      } 
     }, 
     highlighter: { 
      sizeAdjust: 7.5 
     }, 
     cursor: { 
      show: true 
     } 
    }); 
} PlotChart(chartData); 

jsfiddle example

以上就是圖它目前如何看待的一個例子。
我想提供xaxis(tickInterval - 5)上的第1,5,10,15,20點,並且關於1,3,5,15個圖需要在座標平面中以映射值[[ 1,224],[3,672],[5,1120],[15,2240]]

當前它按照xticks分佈,這是不均勻的。歡迎任何幫助!

我試圖得到它使用最小/最大和tickInterval屬性,但似乎它不會很好。

回答

0

如果你想在你的X軸上提供tickIntervals,那麼你可以這樣做。

$.jqplot.config.enablePlugins = true; 
var chartData = [[1, 224], [3, 672], [5, 1120],[15,2240]]; 

function PlotChart(chartData) { 

var plot2 = $.jqplot('chart1', [chartData], { 
    title: 'Mouse Cursor Tracking', 
    seriesDefaults: { 
     renderer: $.jqplot.CanvasAxisLabelRenderer, 
     rendererOptions: { 
      smooth: true 
     }, 
     pointLabels: { 
      show: true 
     } 
    }, 
    axes: { 
     xaxis: { 
      label: 'Number of Cookies', 
      min:0, 
      max:20, 
      tickInterval:5, 
      // renderer to use to draw the axis,  
      tickOptions: { 
       formatString: '%d' 
      } 
     }, 
     yaxis: { 
      label: 'Calories', 
      tickOptions: { 
       formatString: '%.2f' 
      } 
     } 
    }, 
    highlighter: { 
     sizeAdjust: 7.5 
    }, 
    cursor: { 
     show: true 
    } 
}); 
} 
PlotChart(chartData); 

jsFiddle link

您可以繪製圖形之前計算minmaxtickInterval。 我希望這可以幫助。

+0

你的代碼工作正常。但看起來像你提供的jsFiddle鏈接來自我的例子,所以它沒有反映這個變化。這裏是更新的 - http://jsfiddle.net/jpatel/EWJLb/ – Mutant

0

通過使用renderer: $.jqplot.CategoryAxisRenderer你會得到它你同路