Question

我有以下代码来绘制JQPlot条形图。现在我希望所有的条形图都处于相同的高度，并以百分比显示颜色。似乎无法找到一个例子。请帮忙！！

当前图表

enter image description here

预期结果

enter image description here

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

我最近解决了这个问题，并认为我会分享一下我是如何解决这个问题的。我成功地制作了一个标准化的＆＃34;堆积条形图;一个图表，其中所有条形图的大小相同，并且具有不同比例的数据。 Excel当然很容易产生这一点。事实证明，jqPlot也是如此;没有好的例子。

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

例如，如果我的第一个柱子有两个堆叠，第一个堆叠是97％而第二个堆叠是3％，但显示的数据可以是12和456（12 + 456 = 468>＆gt;＆gt; 12 / 468 = 2.56％和456/468 = 97.43％[你也可以从100％中减去第一个]）

jqPlot文档确实暗示了这一点，但它不是很明确，我花了一整天的时间试图弄清楚这一点。仔细阅读示例＃2：http://www.jqplot.com/tests/point-labels.php。这对我来说是什么破解了。：）

干杯，富

Answer 2

问题现在解决了!!它的全部是通过数组（S1，S2，S3）以百分比形式提供数据!!

100％堆积条形图JQPlot

2 个答案: