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

我们正在逐步淘汰交互式统计研究应用程序中的。它已经被替换为。刚才，一个新的请求出现了：一个特定的用例有图形显示，测量值直接显示在图形中。使用Highcharts时就是这样，Highcharts有一个选项；称为dataLabelsActivated。使用人力车时，情况仍应如此。我还没有找到一个办法让它这么做。有什么想法吗

如何使用Highcharts进行显示-红色突出显示的是使用人力车时应存在的测量值：

人力车当前的显示方式：

---

显然人力车不支持这一点。根据rickshar网站上的例子，我可以通过d3库扩展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);
}