我无法使用jqplot正确绘制线图

Question

I want to plot a graph with the following as the xaxis:

var xaxis = [31.1,31.2,31.3,31.4,31.5, 32.1,32.2,32.3,32.4,32.5];

notice how there is a skip between 31.5 and 32.1. However, when I plot my line graph, there is a large space between these two points. Here's my code:

 $(document).ready(function(){

                var cust1 = [[31.1,10],[31.2,15],[31.3,25],[31.4, 60],[31.5,95]];
                var cust2 = [[31.1,0],[31.2,15],[31.3,30],[31.4, 50],[31.5,85]];

                var data = [];
                data.push(cust1);
                data.push(cust2);

                var xaxis = [31.1,31.2,31.3,31.4,31.5, 32.1,32.2,32.3,32.4,32.5];

                var plot3 = $.jqplot('line-chart', data, 
                  { 
                      title:'Design Progress', 

                      axes: {
                          xaxis: {
                              //renderer: $.jqplot.LineRenderer,
                              label: 'Work Weeks',

                              ticks: xaxis
                          },
                          yaxis: {
                              label: "Percent Complete",
                              max: 100,
                              min: 0
                          }
                      }
                  }
                );

            });

I think it's because I'm not specifying a renderer option in my xaxis options. However, I've tried to use $.jqplot.LineRenderer and $.jqplot.CategoryAxisRenderer without any luck (I even set my xaxis values as strings but that didn't work). Anybody know what's going on?

Here's a pic to further clarify:

Answer 1

Reason why it happens : jQuery flot library is building the graph with values that determined by your data.

When you provide such data, the plugin will set the axis values to be as same as the text and with the borders of the numbers you gave. what you can do, is set the text to be different than the axis value.

You can easily do it by options.xaxis.ticks.push([value, "the text"]) .

Pay attention that you are the one who is going to set which label will have which axis value, and this calls for setting the options parameter before calling the $plot