JQPlot - 堆叠水平条形图 - 堆叠时没有条形图答案

【问题标题】：JQPlot - Stacked Horizontal Bar Chart - No Bars When StackedJQPlot - 堆叠水平条形图 - 堆叠时没有条形图
【发布时间】：2012-05-11 20:24:07
【问题描述】：

jqplot 有一个奇怪的问题。我创建了一个带有 2 个系列和 5 个标签的水平条形图；全部由表中的变量填充。

var plot1 = $.jqplot('chart1', [
    [[SERIESA[0],TITLE[0]], [SERIESA[1],TITLE[1]], [SERIESA[2],TITLE[2]], [SERIESA[3],TITLE[3]], [SERIESA[4],TITLE[4]]], 
    [[SERIESB[0],TITLE[0]], [SERIESB[1],TITLE[1]], [SERIESB[2],TITLE[2]], [SERIESB[3],TITLE[3]], [SERIESB[4],TITLE[4]]]], {
    seriesDefaults: {
        renderer:$.jqplot.BarRenderer,
        // Show point labels to the right ('e'ast) of each bar.
        // edgeTolerance of -15 allows labels flow outside the grid
        // up to 15 pixels.  If they flow out more than that, they 
        // will be hidden.
        pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
        // Rotate the bar shadow as if bar is lit from top right.
        shadow: false,
        // Here's where we tell the chart it is oriented horizontally.
        rendererOptions: {
            barDirection: 'horizontal'
        }
    },
    axes: {
        yaxis: {
            renderer: $.jqplot.CategoryAxisRenderer
        }
    }
});

这会呈现一个可爱的水平条形图。我希望将 2 系列堆叠在每个标签下，但是当我添加行时

stackSeries: true,

在我的系列默认值之上，我的条形都消失了。其他一切（标签、刻度等）保持不变。除了我需要添加的 stackSeries 选项之外，还有什么需要添加的吗？

提前致谢！卡尔

【问题讨论】：

标签： options jqplot bar-chart stacked

【解决方案1】：

我不确定您的代码可能是什么原因，您显示的内容似乎没问题。可能是您设置数据的方式有问题，但话又说回来，它根本不起作用。

Check out my example it might help you out.

【讨论】：

是的，我的数据是以一种非常奇怪的方式设置的（我在 MS SharePoint 上使用 CAML、jquery 和 javascript 的混合物进行此操作）但是，就像你说的那样，因为它可以正确呈现而无需堆叠我看不到数据设置在堆叠时如何突然成为问题！然后再一次，SharePoint 可能会无缘无故地抛出一些奇怪的错误...感谢您的关注！
Karl 在这种情况下，如果您仍然遇到此问题，您可以在此处发布一个代码示例，在jsfiddle.net 中提出您的问题，以便我们看看还有什么其他问题？跨度>

【解决方案2】：

我找到了解决问题的方法（不完全，但足以满足我的需要）。仅当我使用从其他地方提取的自定义标签时才会出现此问题；如果我使用通用的“1、2、3、4等”图表正确堆叠并显示数据。理想情况下，我会有自定义标签，但我可以在图表旁边放一个简单的表格作为轴标签。

【讨论】：

【解决方案3】：

其实你可以有自定义标签，通过添加tick，例如：

 xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                tickOptions: {
                    angle: -90
                },
                labelOptions: {
                    fontSize: '11pt',
                },
                ticks: ['tick 1', 'tick 2'],
            }

【讨论】：