Tickformatter在最新版本的Flot中表現不如預期

在我們之前版本的Flot中，以下tickformatter函數運行良好。它顯示了該值並正確使用了該類。Tickformatter在最新版本的Flot中表現不如預期

yaxis: { 
    tickFormatter: function(v, axis) { 
     return "<span class='axisLabel'>" + v + "%</span>"; 
    }

在最新版本（V 0.7），它呈現的標籤字面上那麼旁邊的圖我看到一個類似 <span class='axisLabel'>50%</span> 其中y軸刻度標籤應該的。我只應該看到一個百分比列表。

我已經儘可能多地進行了調試，但還沒有發現是什麼導致了這個問題。任何想法，將不勝感激。

來源

2012-01-19 user1159097

function formatter(val, axis) { 
    return "<span style='font-weight: bold'>" + val/1000000 + "m</span>"; 
} 

var usersData = { color: "#00FF55", data: [[1, 900000], [2, 926000], [3, 959000], [4, 1056000], [5, 1242300]] }; 

$(document).ready(function() { 
    $.plot($("#UserGraph"), [usersData], { xaxis: { ticks: [] }, yaxis: { tickFormatter: formatter } }); 
});

enter image description here

我可以刪除的樣式和編號，回到正常的非粗體數字。

來源

2012-05-08 00:43:37

優秀的答案！如果您的軸標籤重疊，這也是＃1解決方案。 – Sliq

工作，對我來說！謝謝 – Deano

這是由於近期對標籤的處理方式進行了改進，我認爲。從開發版本的README.md開始：

軸標籤現在使用畫布文本繪製，並且一些解析到支持換行符。這解決了各種問題，但也意味着它們不再支持HTML標記，可以作爲DOM元素訪問，或者直接使用CSS樣式訪問。

更具體地說，看來

function insertAxisLabels() {...}

在某一點換成

function drawAxisLabels(){...}

。前者用於放置軸標籤作爲一束<div>元素，如下：

<div class="tickLabels" style="font-size:smaller"> 
    <div class="xAxis x1Axis" style="color:#545454"> 
    <div class="tickLabel" style="position:absolute;text-align:center;left:-14px;top:284px;width:75px"><em>0</em></div> 
    [... div elements for other labels...] 
    </div> 
</div>

即允許一個在tickFormatter使用HTML代碼。在最新版本中，所有這些都消失了，標籤直接通過

ctx.fillText(your_label, x, y);

因此沒有html格式標籤因此工作了。過去很簡單的事情，比如設計刻度標籤或將它們變成鏈接，現在不那麼簡單。也許flot開發人員可以瞭解在新版本中實現相同功能的最佳方式。

我使用flot主要是爲barcharts。一種（醜陋的）解決方法似乎適用於我，它使用insertAxisLabels函數從stable版本（將其重命名爲drawAxisLabels之後）替換最新的jquery.flot.js中的整個drawAxisLabels函數。我另外必須在我的圖的xaxis選項中手動設置labelWidth，否則圖的寬度計算不正確。

來源

2013-01-10 06:02:15 melashot

請注意，在0.8的最終版本中，畫布文本是可選的; HTML文本仍然是默認值。 – DNS

Tickformatter在最新版本的Flot中表現不如預期

回答

相關問題