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

Question

我们正在逐步淘汰 Highcharts javascript visualization lib from our interactive statistics research application. It was already replaced with Rickshaw。刚才一个新的要求进来了：一个特定的用例有图表显示，直接在图表中显示测量值。使用 Highcharts 时就是这种情况（它有一个选项；称为 dataLabelsActivated）。使用人力车时应该仍然如此。我还没有找到让它做到这一点的选项。有任何想法吗？

过去如何使用 Highcharts 显示 - 以红色突出显示的是使用人力车时应该显示的测量值：

人力车目前的显示方式：

Answer 1

显然人力车本身不支持这个。我可能已经通过它所基于的 d3 库扩展 rickshar 来做到这一点（根据其网站上的示例，它似乎能够实现我想要实现的目标）。但是，我最终得到了一个简单的解决方案 - 手动将数据标签添加为 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);
}

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

How to display datapoint labels / values in Rickshaw graph visualizations?

javascript

highcharts

rickshaw