Question

我正在使用带有yMidAxis的jqplot金字塔图。我的图表高度有问题。

我有两个班级左右显示差异。我最初遇到问题，因为defaultqueight在jquery.jqplot.js中设置为300，我想保持这种方式。如果y轴上的刻度数超过18，那么一些刻度不可见，但左边和右边的条是。因此，在jqplot.pyramidAxisRenderer.js中，我注释掉了maxVisibleTicks，因此现在显示所有刻度。

但我的问题是，如果滴答数增加，它们会相互重叠。

是否有一种方法可以在刻度数增加时自动增加默认高度，同样可以在较少的刻度数下降低图表的高度？

x轴值也是自动缩放的。我的缩放范围在0.0到1.4之间（间隔为0.2）。因此，由于其中一个值为1.0或接近它，因此在网格x轴中显示高于1.0的值。 如何将值限制为1.0，无论0.0和1.0之间的值是什么？我尝试使用xaxis的“max”选项，但它不起作用。

我试图添加一个图像，这对于理解问题本来是一个更好的帮助，但不幸的是，由于声誉数字，我不允许这样做。

任何指导都将不胜感激。请在我的代码中找到我目前的内容：

$(document).ready(function(){
    var ticks = ["Aaa", "Bbb", "Ccc", "Ddd", "Eee", "Fff", "Ggg", "Hhh", "Iii", "Jjj", "Kkk", "Lll", "Mmm", "Nnn", "Ooo", "Ppp", "Qqq", "Rrr", "Sss", "Ttt", "Uuu", "Vvv"];
    var class1 = [0.666, 0.670, 0.582, 0.631, 0.582, 0.582, 0.504, 0.622, 0.631, 0.701, 0.671, 0.539, 0.343, 0.649, 0.686, 0.550, 0.000, 0.729, 0.617, 0.275, 0.681, 0.451];
    var class2 = [0.763, 0.653, 1.000, 0.811, 0.890, 0.890, 0.788, 0.784, 0.832, 0.723, 0.516, 0.842, 0.640, 0.643, 0.817, 0.816, 0.723, 0.884, 0.793, 0.846, 0.693, 0.630];

    var Colors = ["#526D2C", "#FF0000"];
    var plotOptions = {
        title: '<div style="float: left; width: 50% ; text-align:center; color: black;">NLF</div><div style="float: right; width: 50%; text-align:center; color: black;">NLM</div><br><br>',
        seriesColors: Colors,
        grid: {
            drawBorder: false,
            shadow: false,
            background: "white"

        },
        defaultAxisStart: 0,
        seriesDefaults: {
            renderer: $.jqplot.PyramidRenderer,
            rendererOptions: {
                barPadding: 4
            },
            yaxis: "yMidAxis",
            xaxis: "xaxis",
            shadow: true
        },
        series: [
            {
                rendererOptions:{
                    side: 'left',
                    synchronizeHighlight: 1
                }
            }
        ],
        axes: {

            xaxis: {
                max: 1                  
            },
            yMidAxis: {
                label: '<div style="float: left; text-align:center; color: black;">Differentiating Taxon</div>',
                tickOptions: {
                },
                ticks: ticks,
                rendererOptions: {
                    category: true,
                    baselineWidth: 2
                },
                numberTicks: 22,
                showTicks: true
            }
        }
    };

    plot1 = $.jqplot("chart1", [class1, class2], plotOptions);  
});

Answer 1

我已经解决了这两个问题，并且已经实现了所需的功能。

只是分享我的方法来实现这一点，也许它对某人有帮助。

对于自动高度随着滴答数的增加，我在上传时计算文件中的滴答数以创建图形，并根据每个刻度我通过使用plotOptions中的height参数增加高度
对于硬盘缩放x轴的问题，我设置'this.pad = 0;'在jquery.jqplot.js文件中。如果设置为0，则默认轴填充为1.0

在jqplot金字塔图中自动增加高度

1 个答案: