jqPlot条形图有问题 [英] Having problems with jqPlot bar chart

问题描述

我正在使用jqPlot创建条形图，但是遇到了一些问题.

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

问题1::图表上的第一个和最后一个条被切掉.其中只有一半显示

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

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

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?

例如:这就是现在所做的.

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]]

这是我正在使用的jQuery.

This is the jquery I am using.

 // 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
                    }
                });
            }

推荐答案

从您希望绘图的外观来看，如果您切换到使用CategoryAxisRenderer而不是DateAxisRenderer，则可以避免很多麻烦. CategoryAxisRenderer可以更好地显示离散的数据分组，而不是真实的时间序列.

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.

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
                }
            });

这篇关于jqPlot条形图有问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！