jqPlot 条形图未居中（太靠右）

Question

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

我遵循 jqPlot 的文档，直到可以生成和自定义一个简单的 2 类条形图（仅供参考 - 条形总和不等于 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

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

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

有谁知道如何解决 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/