有jqPlot条形图的问题

I'm using jqPlot to create a bar graph, but I ran into a few problems.

我正在使用jqPlot创建条形图,但我遇到了一些问题。

Problem 1: The first and last bars on the graph are cut off. Only half of it is displaying

问题1:图表上的第一个和最后一个条被切断。只有一半是显示

Problem 2: I don't want my data points to span the entire x-axis. Is there to not have the data span the entire x-axis?

问题2:我不希望我的数据点跨越整个x轴。是否没有数据跨越整个x轴?

ex: This is what is does right now.

例如:这就是现在做的事情。

This is the data I am passing into it

这是我传递给它的数据

var chartData = [["19-Jan-2012",2.61],["20-Jan-2012",5.00],["21-Jan-2012",6.00]]

This is the jquery I am using.

这是我正在使用的jquery。

 // Plot chart
        function PlotChart(chartData, numberOfTicks) {
            $.jqplot.config.enablePlugins = true;
                 var plot2 = $.jqplot('chart1', [chartData], {
                    title: 'Mouse Cursor Tracking',
                     seriesDefaults:{
                         renderer: $.jqplot.BarRenderer,
                         rendererOptions: {
                            barPadding: 1,
                            barMargin: 15,
                            barDirection: 'vertical',
                            barWidth: 50
                        }, 
                        pointLabels: { show: true }
                    },
                    axes: {
                        xaxis: {
                            pad: 0,       // a factor multiplied by the data range on the axis to give the
                            numberTicks: numberOfTicks,
                            renderer:  $.jqplot.DateAxisRenderer,  // renderer to use to draw the axis,
                            tickOptions: {
                                formatString: '%b %#d'   // format string to use with the axis tick formatter
                            }
                        },
                        yaxis: {
                            tickOptions: {
                                formatString: '$%.2f'
                            }
                        }
                    },
                    highlighter: {
                        sizeAdjust: 7.5
                    },
                    cursor: {
                        show: true
                    }
                });
            }

3 个解决方案

#1

From how you want your plot to look, you'll save yourself a lot of trouble if you switch to using a CategoryAxisRenderer instead of the DateAxisRenderer. The CategoryAxisRenderer is a lot better at displaying discreet groupings of data as opposed to a true time series.

根据您希望绘图的外观,如果切换到使用CategoryAxisRenderer而不是DateAxisRenderer,您将省去很多麻烦。 CategoryAxisRenderer在显示谨慎的数据分组方面要好得多,而不是真正的时间序列。

var axisDates = ["Jan 19", "Jan 20", "Jan 21"]
var chartData = [2.61,5.00,6.00]

        $.jqplot.config.enablePlugins = true;
             var plot2 = $.jqplot('chart2', [chartData], {
                title: 'Some Plot',
                 seriesDefaults:{
                     renderer: $.jqplot.BarRenderer,
                     rendererOptions: {
                        barPadding: 1,
                        barMargin: 15,
                        barDirection: 'vertical',
                        barWidth: 50
                    }, 
                    pointLabels: { show: true }
                },
                axes: {
                    xaxis: {                            
                            renderer:  $.jqplot.CategoryAxisRenderer,
                            ticks: axisDates
                    },
                    yaxis: {
                        tickOptions: {
                            formatString: '$%.2f'
                        }
                    }
                },
                highlighter: {
                    sizeAdjust: 7.5
                },
                cursor: {
                    show: true
                }
            });

#2

The DateAxisRenderer is really meant for line graphs, not bar graphs. When you combine it with bar graphs, it just doesn't work right. The idea / goal of the DateAxisRenderer is to make a linear / accurate time graph across a date/time. That way, if you miss a date entry, it will still be drawn to scale over time. Check their examples on the DateAxisRenderer here: http://www.jqplot.com/tests/date-axes.php

DateAxisRenderer实际上是用于折线图,而不是条形图。将它与条形图组合使用时,它无法正常工作。 DateAxisRenderer的想法/目标是在日期/时间内制作线性/准确的时间图。这样,如果您错过了日期条目,它仍将按时间缩放。在这里查看DateAxisRenderer上的示例:http://www.jqplot.com/tests/date-axes.php

What you're wanting to use is the CategoryAxisRenderer. You can then just override / create your own tick label renderer and be good to go. Normally you wouldn't want to append extra empty items to an item, especially if they're empty, however, if you do, just append them to your data array.

你想要使用的是CategoryAxisRenderer。然后,您可以覆盖/创建自己的刻度标签渲染器并且很好。通常,您不希望将额外的空项附加到项目中,特别是如果它们是空的,但是,如果这样做,只需将它们附加到数据数组即可。

Here's a jsfiddle doing what you want: http://jsfiddle.net/fordlover49/JWhmQ/

这是一个jsfiddle做你想要的:http://jsfiddle.net/fordlover49/JWhmQ/

Note that you may want to look at the manage resources section to verify what files you need to reference (in addition to the jquery file).

请注意,您可能需要查看manage resources部分以验证需要引用的文件(除了jquery文件之外)。

Here's the javascript in case jsfiddle acts up:

以下是jsfiddle运行时的javascript:

$.jqplot.config.enablePlugins = true;
var chartData = [["19-Jan-2012", 2.61], ["20-Jan-2012", 5.00], ["21-Jan-2012", 6.00]];

// add a custom tick formatter, so that you don't have to include the entire date renderer library.
$.jqplot.DateTickFormatter = function(format, val) {
    // for some reason, format isn't being passed through properly, so just going to hard code for purpose of this jsfiddle
    val = (new Date(val)).getTime();
    format = '%b&nbsp%#d'
    return $.jsDate.strftime(val, format);
};

function PlotChart(chartData, extraDays) {
    // if you want extra days, just append them to your chartData array.
    if (typeof extraDays === "number") {
        for (var i = 0; i < extraDays; i++) {
            var actualDate = new Date(chartData[chartData.length - 1]); // convert last entry to actual date
            var newDate = new Date(actualDate.getFullYear(), actualDate.getMonth(), actualDate.getDate() + 1); // create new increased date
            chartData.push([newDate, 0]);
        }
    }

    var plot2 = $.jqplot('chart1', [chartData], {
        title: 'Mouse Cursor Tracking',
        seriesDefaults: {
            renderer: $.jqplot.BarRenderer,
            rendererOptions: {
                barPadding: 1,
                barWidth: 50
            },
            pointLabels: {
                show: true
            }
        },
        axes: {
            xaxis: {
                pad: 1,
                // a factor multiplied by the data range on the axis to give the            
                renderer: $.jqplot.CategoryAxisRenderer,
                // renderer to use to draw the axis,     
                tickOptions: {
                    formatString: '%b %#d',
                    formatter: $.jqplot.DateTickFormatter
                }
            },
            yaxis: {
                tickOptions: {
                    formatString: '$%.2f'
                }
            }
        },
        highlighter: {
            sizeAdjust: 7.5
        },
        cursor: {
            show: true
        }
    });
}

PlotChart(chartData, 3);

#3

Here is a simple hack that I used to show a margin.

这是一个简单的黑客,我曾经显示一个边缘。

I create a starting date and an ending date which are respectively one day before and one day after the contents I want to show.

我创建了一个开始日期和结束日期,分别是我想要显示的内容的前一天和后一天。

For example if I want to show the month of January 2012

例如,如果我想显示2012年1月

var startingDate = new Date(2012, 0, 0); //=> 31th Dec 2011
var endingDate = new Date(2012, 1, 1); //=> 1st Feb 2012

Then I declare my own DateTickFormatter where I will not printout these two dates.

然后我声明我自己的DateTickFormatter,我不打印这两个日期。

$.jqplot.DateTickFormatter = function(format, val) {
        if (!format) {
            format = '%Y/%m/%d';
        }

        if(val==startingDate.getTime() || val==endingDate.getTime()){
            return "";
        }else{
            return $.jsDate.strftime(val, format);
        }
    };

Then in the xaxis I put the following options:

然后在xaxis中我提出以下选项:

xaxis : {
      renderer:$.jqplot.DateAxisRenderer, 
      min:startingDate,
      max:endingDate,
      tickInterval:'1 day'
}