Показать текст в 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 Решение, с которым вы связались, похоже, является хорошим компромиссом, если вы намерены использовать диаграммы Google. Если вы предпочтете использовать ярлыки для использования графиков Google, я бы предложил посмотреть на 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