Jquery Flot 条形图不适合面板

Question

我有两个条形图，一个显示前十个类别，另一个显示最少十个类别。前十条形图没有问题，但我使用与前十条形图相同的代码绘制最小十条形图，但结果如下。

这是前十名：

这是第 10 分钟：

正如您在上图中看到的那样，至少有 10 个图表的条形看起来已损坏，并且看不到条形下方的标签。

这里是产生这些结果的代码：

MinTen 生成了 html，它提供了条形图：

var initCatMinTenBarChart = function ()
    {

        var dataMin = new Array();

var ticks = [[0, 'Kozmetik'],[1, 'Ev&Yaşam'],[2, 'Cep Telefonu'],[3, 'Ayakkabı'],[4, 'Bilgisayar'],[5, 'Beyaz Eşya']];var labels = ['Kozmetik','Ev&Yaşam','Cep Telefonu','Ayakkabı','Bilgisayar','Beyaz Eşya'];var minTenCat_d1 = 18;var minTenCat_d2 = 12;var minTenCat_d3 = 8;var minTenCat_d4 = 7;var minTenCat_d5 = 6;var minTenCat_d6 = 4;            
            var isempty = false;

var d_min_ten_cat_bar = [[0,18],[1,12],[2,8],[3,7],[4,6],[5,4]];

        dataMin.push({
            label: labels,
            data: d_min_ten_cat_bar,
            bars: {
                show: true,
                barWidth: 0.2,
                order: 1
            }
        });

        if (!isempty) {
            $.plot("#MinTenCatBarChart", dataMin, $.extend(true, {}, Plugins.getFlotDefaults(), {
                legend: {
                    show: false
                },
                series: {
                    lines: { show: false },
                    points: { show: false }
                },
                grid: {
                    hoverable: true,
                    clickable: true
                },
                tooltip: true,
                tooltipOpts: {
                    content: function (label, x, y) { return 'İçerik Sayısı: ' + y; }
                },
                bars: {
                    align: "center",
                    barWidth: 0.1
                },
                xaxis: {
                    align: "center",
                    ticks: ticks
                },
                yaxis: {
                    tickLength: 0
                }
            }));
        }
}

TopTen 产生了 html 条形图数据：

var initCatTopTenBarChart = function ()
    {
        var dataTop = new Array();

var ticks = [[0, 'Kozmetik'],[1, 'Ev&Yaşam'],[2, 'Cep Telefonu'],[3, 'Ayakkabı'],[4, 'Bilgisayar'],[5, 'Beyaz Eşya']];var labels = ['Kozmetik','Ev&Yaşam','Cep Telefonu','Ayakkabı','Bilgisayar','Beyaz Eşya'];var topTenCat_d1 = 18;var topTenCat_d2 = 12;var topTenCat_d3 = 8;var topTenCat_d4 = 7;var topTenCat_d5 = 6;var topTenCat_d6 = 4;            
            var isempty = false;

var d_top_ten_cat_bar = [[0,18],[1,12],[2,8],[3,7],[4,6],[5,4]];

        dataTop.push({
            label: labels,
            data: d_top_ten_cat_bar,
            bars: {
                show: true,
                barWidth: 0.2,
                order: 1
            }
        });

        if (!isempty) {
            $.plot("#TopTenCatBarChart", dataTop, $.extend(true, {}, Plugins.getFlotDefaults(), {
                legend: {
                    show: false
                },
                series: {
                    lines: { show: false },
                    points: { show: false }
                },
                grid: {
                    hoverable: true,
                    clickable: true
                },
                tooltip: true,
                tooltipOpts: {
                    content: function (label, x, y) { return 'İçerik Sayısı: ' + y; }
                },
                bars: {
                    align: "center",
                    barWidth: 0.1
                },
                xaxis: {
                    align: "center",
                    ticks: ticks
                },
                yaxis: {
                    tickLength: 0
                }
                // tick olasyına bak 0,10 arası işlemez burda max-min şeyapmak lazım
            }));
        }
    }

Answer 1

可能是图表渲染的时候定位不对？仅在选择并显示相应的选项卡后尝试绘制图表。

Jquery Flot 条形图不适合面板

Jquery Flot Bar Chart doesn't fit to the board

javascript

jquery

flot

bar-chart