jqPlot条形图不居中（从远到右）

Question

我是jqPlot的新手，所以请不要因为这个简单的问题而粉碎我。

我遵循jqPlot的文档，我可以生成和自定义一个简单的2类别条形图（FYI - 条形不总和为100％:)）。这是我的javascript文件的代码，它呈现图形（目标div = GraphContainer）：

$.jqplot('GraphContainer',  [[55, 18.6]], {
    title: 'Correct vs. Incorrect',
    axes:{
        xaxis:{tickOptions: {show: false}}
    },
    seriesColors:['#00FF00', '#FF0000'],
    series:[{renderer:$.jqplot.BarRenderer}],
    seriesDefaults: {rendererOptions: {barWidth: 50}}
});

以下是它的呈现方式：

您可能会立即看到我的小而重要的问题。酒吧不居中;在我看来，他们走得太远了。我仔细阅读了这里的选项文档：jqPlot options

我没有在文档中看到任何描述左侧栏的水平“翻译”的内容。有趣的是，我试图切换到barDirection：seriesDefaults下的'horizo​​ntal'，这导致了基本相同的问题，但是在垂直方向（条形太远了）：

我试图增加目标div的宽度，但这加剧了这个问题（看起来更糟）。我确实提出了一个黑客解决方案;我添加了第三个高度= 0的条形，并将条形宽度减小了一点，将条形向左推（相对于上面的第一个图形），如下图所示（这是向右方向的一个步骤;使用条宽和填充可以让我调整）：

有没有人知道如何解决jqPlot上条形图的“居中”问题？我在这个网站上看过其他几个对齐帖子（例如this one），但到目前为止还没有任何帮助我的具体情况。

Answer 1

您正在获取分类/序数数据并将其拟合到线性/数字x轴（除非您另行指定，否则jqPlot会为您提供此数据）。 jqPlot有一些数值轴的默认填充逻辑，我认为这是未对齐的来源。在单杠屏幕截图中，您可以看到它将您的值设为1.0和2.0。我假设默认填充逻辑将轴启动为零，并将最后一个值增加25％。

理论上你可以设置min/max of the axis来避免这种情况。但我认为一个更直接的解决方案是对x使用类别轴（$.jqplot.CategoryAxisRenderer），它只是将它们按顺序排列，并且不会尝试对x标度进行任何数值计算或填充。

以下代码基于jqPlot网站的Bar Colors Example，并根据您的示例进行了修改：

var graphData = [['Correct', 55],['Incorrect', 18.6]];

$('#GraphContainer').jqplot([graphData], {
    title: 'Correct vs. Incorrect',
    seriesColors:['#00FF00', '#FF0000'],
    seriesDefaults:{
        renderer:$.jqplot.BarRenderer,
        rendererOptions: {
            varyBarColor: true
        }
    },
    axes:{
        xaxis:{
            renderer: $.jqplot.CategoryAxisRenderer
        }
    }
});

请参阅此处的JSFiddle示例：

http://jsfiddle.net/3y9ZU/3/