JQuery Flot Bar Chart не подходит для доски

У меня есть две гистограммы, одна из которых показывает десять лучших категорий, другая показывает десять категорий. Нет проблем с первой десяткой гистограмм, но я использую тот же самый код, чтобы нарисовать минутную гистограмму, которую я использовал в первой десятке гистограмм, но вот результат.JQuery Flot Bar Chart не подходит для доски

Это топ десять:

enter image description here

И это минут десять:

enter image description here

Как вы можете видеть выше изображения, бары МИН десятки чарта выглядят как поврежденные этикетки и ниже бары не видны.

А вот коды, которые производят эти результаты:

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

источник

2015-01-06 Burak Karakuş

JS практически идентичен, заставляет меня думать о проблеме с контейнером CSS? Некоторый стиль на первой вкладке (мин. 10) отличается от другого. Или, может быть, позиционирование отключено из-за того, когда отображается график? Попробуйте рисовать диаграммы только после того, как их соответствующая вкладка будет выбрана и видна. – SteamDev

Я попробую, спасибо @SteamDev. –

Спасибо, это сработало! Я думаю, вы должны написать это как ответ, чтобы я мог принять его как решение. –

Возможно, позиционирование отключено из-за того, когда отображается график? Попробуйте рисовать диаграммы только после того, как их соответствующая вкладка будет выбрана и видна.

источник

2015-01-07 16:08:05 SteamDev

JQuery Flot Bar Chart не подходит для доски

ответ

Смежные вопросы