如何在人力车图形可视化中显示数据点标签/值？

Question

我们正在从我们的互动统计研究应用程序中逐步淘汰Highcharts javascript visualization lib。它已被Rickshaw取代。刚刚出现了一个新的请求：一个特定的用例有图表显示，测量结果直接显示在图表中。在使用Highcharts（其中有一个选项;称为dataLabelsActivated）时就是这种情况。使用人力车时仍应如此。我还没有找到一个可以做到这一点的选择。有任何想法吗？

以前用Highcharts显示的方式 - 以红色突出显示的是使用人力车时应该存在的测量值：

目前人力车如何显示：

Answer 1

显然，人力车本身并不支持这种做法。我可能已经通过将rickhar扩展到它所基于的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);
}