Как отображать метки/значения datapoint в визуализации графа Рикши?

Question

Мы отменяем Highcharts javascript visualization lib из нашего приложения для изучения интерактивных статистических данных. Он был заменен на Rickshaw. Только сейчас появился новый запрос: один из вариантов использования имеет графический дисплей с измерениями, отображаемыми на графике напрямую. Это имело место при использовании Highcharts (у которого есть опция для этого: dataLabelsActivated). Это должно быть так, когда вы используете Рикшу. Я еще не нашел возможности сделать это. Есть идеи?

Как используется для отображения с Highcharts - выделены красным цветом, являются измерения, которые должны быть там при использовании Рикша:

Как он в настоящее время отображения с Рикша:

Answer 1

Видимо, рикша не поддерживает это изначально. Возможно, я сделал это, расширив rickshar через библиотеку d3, на которой он основан (что, похоже, способно делать то, что я намеревался достичь, в соответствии с примерами на его сайте). Тем не менее, я закончил с простым решением - добавил метки данных как divs вручную, в зависимости от расстояния каждого datapoint от верхнего левого угла элемента графа. Ниже кода выполняется поиск атрибута данных графика для данных, которые будут отображаться в ярлыках, используя цвет данных, поскольку он является единственным элементом для сопоставления данных с информацией в атрибуте данных.

$(".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); 
}