如何顯示Rickshaw圖表可視化中的數據點標籤/值？

我們正在從我們的交互式統計研究應用程序中逐步淘汰Highcharts javascript visualization lib。它已被Rickshaw取代。剛剛出現一個新的請求：一個用例有圖形顯示，直接顯示測量結果。使用Highcharts（有一個選項，稱爲dataLabelsActivated）就是這種情況。使用Rickshaw時應該仍然如此。我還沒有找到可以做到的選項。有任何想法嗎？如何顯示Rickshaw圖表可視化中的數據點標籤/值？

它是如何使用Highcharts顯示 - 以紅色突出顯示使用人力車的時候，應該是有測量：

How it used to display with Highcharts

它是如何目前與人力車顯示：

How it currently display with Rickshaw

來源

2015-04-02 HumanInDisguise

顯然人力車不支持這個本地。我可能通過將rickshar擴展到它所基於的d3庫（根據其網站上的示例，似乎能夠做到我打算實現的目標）來完成此任務。但是，我最終得到了一個簡單的解決方案 - 根據每個數據點距離圖元素左上角的距離，手動將數據標籤添加爲div。下面的代碼使用數據點的顏色來搜索圖的數據屬性以顯示標籤中的數據，因爲它是將數據點與數據屬性中的信息進行匹配的唯一項。

$(".pointMarker").each(function(index) { 
    var percentage = 0; 
    var currentMarkerColor = self.rgb2hex($(this).css("border-top-color")); 
    self.graph.series.forEach(function(series) { 
     if(currentMarkerColor === series.color) { 
     if (!/undef/i.test(typeof series.data[index])) { 
      percentage = parseFloat(series.data[index].y).toFixed(2); 
     } 
     //end loop 
     return false; 
     } 
    }); 
    if (percentage > 0) { 
     var totalHeight = $(this).parent().height(); 
     var distanceTop = $(this).css("top").replace(/[^-\d\.]/g, '') ; 
     //display data 
     $(this).parent().append("<div class='dataLabel' style='top:"+(parseInt($(this).css('top'), 10)-5)+"px;left:"+(parseInt($(this).css('left'), 10)-9)+"px;height:100px;width:100px;'>"+percentage+"</div>"); 
    } 
    });

和

this.rgb2hex = function (rgb){ 
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); 
    return "#" + 
     ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) + 
     ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) + 
     ("0" + parseInt(rgb[3],10).toString(16)).slice(-2); 
}

來源

2015-04-17 07:39:46 HumanInDisguise

如何顯示Rickshaw圖表可視化中的數據點標籤/值？

回答

相關問題