浮景图数据或其他原因的最大长度，即使渲染轴，水平条也可能不显示

感谢任何愿意提供帮助的人！ 我刚来这里，希望我遵循正确的格式。

我有几个在jquery中使用flot图表制作的水平条形图。 大多数都完美地呈现数据。 一个没有。 在此图表中，将显示轴标签和数据系列标签，刻度标签和我的垂直滚动条也是如此。 但是，图表中不会呈现任何实际的轴或数据。

一个主要区别是此图表比其他图表具有更多的数据 - 大约 500 行而不是大约 50 行。 所有图表的图表区域都使用jquery.css调整为行数，以便图表的高度都不同。 我想知道水平条形图格式的数据量是否只是有限制。 我发现了一些关于 flot 图表折线图的堆栈溢出问题，它说在这种格式的 x 轴上每个像素最多可以有一个点 - 所以我想知道水平条形图的高度是否有类似的事情。

或者，是否有人在我的代码中看到可能导致数据和轴无法呈现的任何其他内容？

数据通过 mySQL 的 API 调用到 jSON 对象中，我用 javascript 格式化该对象，以 [[data， index]] 的形式在 flot 图表中使用。 图表应该在页面上加载到div 类"pd_level"中。 还有一个带有下拉菜单的过滤功能，当从下拉列表中选择某些内容时，新图表会在div 类"pd_level"和"转换"中显示。 这个过滤器在我的许多其他图表上，并且在这些图表上工作正常。

该网页：

<div class="filter">
    <select id="selec" name="pd_id" class="form-control form-filter input-sm">
        <option id="pd_id" value="">Filter by Product...</option>
    </select>
</div>
<div class="portlet box blue">
    <div class="portlet-title">
        <div class="caption">
            <i class="icon-bar-chart"></i>Product Performance
        </div>
        <div class="tools">
            <a href="javascript:;" class="collapse">
            </a>
            <a href="#portlet-config" data-toggle="modal" class="config">
            </a>
            <a href="javascript:;" class="reload">
            </a>
            <a href="javascript:;" class="remove">
            </a>
        </div>
    </div>
    <div class="portlet-body">
        <div id="box" style="height: 600px; overflow: scroll;">
            <div id="chart_1_2" class="chart pd_level">
            </div>
        </div>
        <div id="box">
            <div id="chart_1_2" class="chart conversions">
            </div>
        </div>
    </div>
</div>

javascript：

var load = function () {
    $.getJSON('api/db/product_conversions_pd_level', function (data) {
        var i = 0;
        var dta0 = [], dta1 = [], ticks = [];
        var dtlist = [dta0, dta1];
        var calcs = ['view', 'choose'];
        //this runs through each row and grabs the relevant values and adds them to an array of arrays for the chart data
        $.each(data, function (key, val) {
            for (n = 0; n < calcs.length; n++) {
                var s = this[calcs[n]];
                var dt = parseInt(s);
                var d = dtlist[n];
                d.push([dt, i]);
            }
            var labellist = this.pd_name;
            console.log(labellist);
            var tks = [i, labellist];
            ticks.push(tks);
            i++;
        });
        $('.pd_level').css('height', (ticks.length * 6 * 25) + 'px').css('width', '95%');
        //this sets the value of the dataset and its labels, as well as plot options for the chart
        var dataset = [{label: "Views", data: dta0}, {label: "Selections", data: dta1}];
        var options = {
            series: {bars: {show: true}},
            bars: {
                align: "center",
                barWidth: .10,
                horizontal: true,
                order: 2,
                fillColor: {colors: [{opacity: .9}, {opacity: .9}]}
            },
            pan: {interactive: true},
            yaxis: {axisLabel: 'Products', ticks: ticks, align: "center", tickLength: .5, tickSize: 2, panRange: [0, 5]},
            xaxis: {position: 'top', axisLabel: 'Number of Actions'},
            legend: {noColumns: 1, labelBoxBorderColor: "#000000", position: "ne"},
            colors: ["#85adf4", "#92acac", "#8b9ef4", "#b6acac", "#97b690", "#7abeda"],
            grid: {hoverable: true}
        };
        //this plots the chart in the div
        toolt(ticks, 5, 50, '.pd_level', 'h');
        $.plot($('.pd_level'), dataset, options);
    });
};
load();