在Google Chart Sankey Diagram上显示文字

Question

我正在使用Google Chart - Sankey Diagram。我想让重量显示在每个流程上而不需要鼠标悬停。

对于以下官方样本（jsfiddle）：

  google.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'From');
    data.addColumn('string', 'To');
    data.addColumn('number', 'Weight');
    data.addRows([
      [ 'A', 'X', 5 ],
      [ 'A', 'Y', 7 ],
      [ 'A', 'Z', 6 ],
      [ 'B', 'X', 2 ],
      [ 'B', 'Y', 9 ],
      [ 'B', 'Z', 4 ]
    ]);

    // Sets chart options.
    var options = {
      width: 600,
    };

    // Instantiates and draws our chart, passing in some options.
    var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
    chart.draw(data, options);
  }

看起来像这样：

我找到了this解决方案，但这不是我想要的。

我想要的是直接在流量上显示重量作为标签。您无需将鼠标移动到任何流量上即可查看它的重量。

先谢谢！

Answer 1

Google图表并不具备这种自定义功能。

如果您决定使用谷歌图表，那么您链接的

This解决方案似乎是一个很好的折衷方案。如果您更喜欢使用谷歌排行榜的标签，我建议您查看d3.js，它可以实现您想象的尽可能多的自定义。

使用d3.js和Sankey diagram plugin我通过添加以下行创建了您想要的图表：

/* add links */
var link = svg.append("g").selectAll(".link")
    .data(graph.links)
    .enter()
  .append("path")
    .attr("class", "link")
    .attr("id",function(d,i) { return "linkLabel" + i; })
    .attr("d", path)
    .style("stroke-width", function (d) {
       return Math.max(1, d.dy);
    })
    .sort(function (a, b) {
       return b.dy - a.dy;
    })
...

var labelText = svg.selectAll(".labelText")
    .data(graph.links)
    .enter()
  .append("text")
    .attr("class","labelText")
    .attr("dx",130)
    .attr("dy",0)
  .append("textPath")
    .attr("xlink:href",function(d,i) { return "#linkLabel" + i;})
    .text(function(d,i) {                                 
        return d.source.name + " → " + d.target.name + " : " + d.value;});

JSFiddle