javascript - Show Text on Google Chart Sankey Diagram - Stack Overflow

admin管理员组

文章数量:1389878

I'm using Google Chart - Sankey Diagram. I want to make the weights show up on each flow with no need mouse over.

For the official sample as following (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);
  }

It may look like this:

I found this solution, but it's not what I want.

What I want is directly showing the weight as label on the flow. You don't need to move your mouse over any flow to see how many weight it is.

I'm using Google Chart - Sankey Diagram. I want to make the weights show up on each flow with no need mouse over.

For the official sample as following (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);
  }

It may look like this:

I found this solution, but it's not what I want.

What I want is directly showing the weight as label on the flow. You don't need to move your mouse over any flow to see how many weight it is.

• javascript
• google-visualization
• data-visualization
• sankey-diagram

Share Improve this question Follow edited Apr 9, 2022 at 13:39 vvvvv 32.2k1919 gold badges6464 silver badges100100 bronze badges asked Nov 3, 2015 at 6:30 Veck HsiaoVeck Hsiao 63722 gold badges99 silver badges2121 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Google charts isn't really that capable of that sort of customization.

This solution that you linked to seems like a good promise if you're determined to use google charts. If you'd rather get the labels over use google charts, I'd suggest looking into d3.js, which allows about as much customization as you can imagine.

Using d3.js and the Sankey diagram plugin I created your desired graph by adding the lines:

/* 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

本文标签： javascriptShow Text on Google Chart Sankey DiagramStack Overflow