Jquery Flot條形圖不適合董事會

我有兩個條形圖，其中一個顯示前十個類別，另一個顯示十個分類。前十條形圖沒有問題，但我使用非常相同的代碼來繪製我在前十條形圖中使用的十條形圖，但這裏是結果。Jquery Flot條形圖不適合董事會

這是前十名：

enter image description here

這是分十：

enter image description here

正如你可以看到上面的圖片，分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 
      })); 
     } 
    }

來源

2015-01-06 Burak Karakuş

JS實際上是相同的，讓我覺得它與容器CSS的問題？第一個標籤中的某些樣式（分鐘10）與另一個不同。或者，也許定位是關閉的，因爲當圖表被渲染？嘗試僅在選擇並顯示其相應選項卡後繪製圖表。 – SteamDev

我會試試看，謝謝@SteamDev。 –

謝謝，這工作！我認爲你應該把它寫成答案，以便我可以接受它作爲解決方案。 –

由於圖表被渲染時，定位可能會關閉？嘗試僅在選擇並顯示其相應選項卡後繪製圖表。

來源

2015-01-07 16:08:05 SteamDev

Jquery Flot條形圖不適合董事會

回答

相關問題