jQuery Flot圖表：帶動態項目的自動條寬度

-2

我的圖表基於輸入過濾器輸出動態數據。這些可以有1到30個酒吧，他們調整屏幕大小/設備。只是一個例子，目前有< 5個酒吧和圖表寬度是1138px（最大），那麼我有寬度非常大的酒吧。jQuery Flot圖表：帶動態項目的自動條寬度

問：這個問題是怎麼解決的？

var options = { 
      xaxis: { ticks: ticks}, 
      grid: { clickable: false, hoverable: true }, 
      series: { stack: true, bars: {show: true,align: 'center',barWidth: 0.5,lineWidth: 2,fillColor: {colors: [{opacity: 0.9}, {opacity: 0.9}]}} }, 
      legend: {container: ".widget-legend"} 
     };

來源

2015-09-18 alex

所以，你的問題是變量欄的寬度？你想要一個恆定的條寬度像素？你從我的代碼中看到的 – Raidri

，酒吧的寬度總是0.5，即使我只有一個酒吧，那麼如何讓酒吧寬度動態？ – alex

0.5是以x軸爲單位，並且寬度以像素爲單位取決於圖表的寬度。我仍然不明白你的問題是什麼以及你想達到什麼目的。 – Raidri

假設你想給你的杆相同的像素寬度是否有1名或30巴，可以爲barWidth從圖表（在x軸的單位和像素的寬度計算值，校正軸和利潤）使用cross-multiplication。在1100像素上最多30像素的合理像素寬度應爲每像素20像素左右。

var chartWidthInPixels = 1100 * 0.95; // or $('#chart').width() * 0.95 
var barWidthInPixels = 20; // or chartWidthInPixels/50 

var chartWidthInAxisUnits = (max(ticks) - min(ticks)) + 1; // this will be 1 for one bar 
var barWidthInAxisUnits = barWidthInPixels * (chartWidthInAxisUnits/chartWidthInPixels);

對於上述示例的值一個杆此給出了barWidth周圍0.019。通過改變公式中的常數，您可以修改計算。

來源

2015-09-18 14:27:53 Raidri

jQuery Flot圖表：帶動態項目的自動條寬度

回答

相關問題