Javascript flot图表数据的最大长度或其他原因水平条可能不会显示，即使轴已渲染

感谢所有愿意帮忙的人！我是新来的，希望我遵循正确的格式

我在jquery中使用flot图表制作了几个水平条形图。大多数渲染数据都非常精细。一个没有。在此图表中，将显示轴标签和数据系列标签，以及刻度标签和我的垂直滚动条。但是，图表中不会呈现任何实际轴或数据

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

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

数据通过一个API从mySQL调用到一个jSON对象中，我用javascript将其格式化，以[[data，index]]的形式在flot图表中使用。图表应在页面上加载到div类pd_级别。还有一个带有下拉菜单的过滤函数，当从下拉菜单中选择某个内容时，新图表将显示在div类pd_level和conversions中。这个过滤器出现在我的许多其他图表上，并且在这些图表上运行良好

html：

<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();

---

我的图形中没有显示bas的模拟问题。

---

我的图形使用动态宽度，当宽度大于32750px时，我发现图形变为空白。

也许可以尝试从500行逐渐减少数据，直到渲染；这可能有助于说明问题所在。flot对将绘制的数据量没有严格限制。我的猜测是，您的数据不知何故是不正确的，并且破坏了您的阵列构建代码。控制台上有错误吗？另外，使用api/db/product_conversions_pd_级别返回的JSON数据更新您的问题，因为这是诊断问题的唯一方法。将其与相关代码一起发布，或在问题的注释部分中发布。