jqPlot条形图不居中（从远到右）-Java 学习之路

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

以下是它的呈现方式：

here

您可以立即看到我的小而重要的问题 . 酒吧不居中;在我看来，他们太偏右了 . 我通读了这里的选项文档：jqPlot options

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

enter image description here

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

enter image description here

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

1 回答

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/
回复于 2024-04-19T14:30:26+08:00

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

1 回答

相关问题