使用jqPlot条形图遇到问题

Question

我正在使用 jqPlot 创建一个柱状图，但遇到了一些问题。

问题1： 图表上的第一个和最后一个柱被削减了。只显示了一半。

问题2： 我不想让我的数据点跨越整个 x 轴。有没有方法让数据不跨越整个 x 轴？

示例： 这是它现在的效果。

这是我传递给它的数据。

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

这是我使用的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
                    }
                });
            }

- chobo

---

更改您的x轴填充，更改或不要硬编码刻度数。 - PriorityMark

我尝试更改垫片，但没有任何效果。滴答数设置为要显示的项目数量...我将尝试增加它。 - chobo

增加物品数量没有任何影响。 - chobo

Answer 1

从您希望图表的样子来看，如果您切换到使用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
                }
            });

- Mark

Answer 2

DateAxisRenderer主要用于线性图，不适用于条形图。当您将其与条形图结合使用时，它无法正常工作。 DateAxisRenderer的想法/目标是在日期/时间上创建线性/准确的时间图。这样，如果您错过了日期条目，它仍将按比例绘制。在此处检查DateAxisRenderer的示例：http://www.jqplot.com/tests/date-axes.php 您要使用的是CategoryAxisRenderer。然后，您只需覆盖/创建自己的刻度标签渲染器即可。通常，您不希望向项目附加额外的空项目，特别是如果它们是空的，但是如果您这样做，只需将它们附加到数据数组即可。

这是一个jsfiddle可以做到您想要的：http://jsfiddle.net/fordlover49/JWhmQ/ 请注意，您可能需要查看管理资源部分以验证需要引用哪些文件（除了jquery文件）。

以下是 JavaScript 代码，以防 jsfiddle 出现问题：

$.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);

- PriorityMark

Answer 3

以下是我用来显示边距的简单技巧。

我创建了一个起始日期和一个结束日期，分别比我想要显示的内容早一天和晚一天。

例如，如果我想要显示2012年1月份的内容：

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

然后我声明了自己的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);
        }
    };

然后在 xaxis 中放置以下选项：

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

- kendokamax