100% 堆积条形图 JQPlot

Question

我有以下用于绘制 JQPlot 条形图的代码。现在我希望所有的条都处于相同的高度并以百分比显示颜色。好像找不到例子。请帮忙！！

当前图表

预期结果

var s3 = [11, 28, 22, 47, 11, 11];
var s1 = [0, 6, 3, 0, 0, 0];
var s2 = [1, 0, 3, 0, 0, 0];
var dataArray = [s3, s1, s2];
var ticks = ['John', 'Tumm', 'Wen', 'Ken', 'Dolly'];

var options = {
    title: 'Title ',
    stackSeries: true,
    seriesColors: ["#eb4b3d", "#ffc800", "#009149"],
    seriesDefaults: {
        renderer: $.jqplot.BarRenderer,
        pointLabels: {
            show: true
        },
        rendererOptions: {
            barWidth: 25,
            varyBarColor: true,
        },
    },
    axes: {
        xaxis: {
            // renderer: $.jqplot.CategoryAxisRenderer,
            //  
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks: ticks,
        },
        yaxis: {
            //autoscale: true,
            //label: 'Application Count',
            min: 0,
            tickInterval: 5,
            max: 50
        }
    },
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
        tickOptions: {
            angle: -30,
            fontSize: '10pt'
        }
    }
};

var plot = $.jqplot('chartDivId', dataArray, options);

Answer 1

问题已经解决了！！它都是关于通过数组（S1，S2，S3）以百分比提供数据！

Answer 2

我最近解决了这个问题，我想我会分享一下我是如何解决这个问题的。我设法制作了一个“标准化”堆积条形图；一个图表，其中所有条形图大小相同，数据比例不同。 Excel 当然很容易产生这个。事实证明，jqPlot 也是如此；就是没有好的例子。

解决方案是构建图表数据，使每个最里面的元素包含三个项目（即[1, 2, 3]），而不是通常的两个项目（[1, 2]）。第一项是序列号，第二项是绘图点，jqPlot 假设它也将是绘图点的标签。但是，此行为被第三项（可能与数据不同的标签）覆盖。所以在我的例子中，结构是：([series], [bar percent], [data])。

例如，如果我的第一个 bar 有两个堆栈，第一个堆栈是 97%，第二个堆栈是 3%，但显示的数据可以是 12 和 456 (12 + 456 = 468 >>> 12/468 = 2.56% 和 456/468 = 97.43% [你也可以从 100% 中减去第一个])

jqPlot 文档确实暗示了这一点，但它不是很明确，我花了一整天的时间试图自己弄清楚这一点。仔细阅读示例 #2：http://www.jqplot.com/tests/point-labels.php。这就是为我破解它的原因。 :)

干杯， 丰富