Показать текст на диаграмме Google Диаграмма Санки

Я использую Google Chart — Диаграмма Санки. Я хочу, чтобы веса отображались в каждом потоке без необходимости наводить курсор мыши.

Для официального образца следующим образом (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);
  }

Это может выглядеть так:

введите здесь описание изображения

Я нашел это решение, но это не то, что мне нужно.

Я хочу напрямую показывать вес как метку в потоке. Вам не нужно наводить указатель мыши на любой поток, чтобы увидеть, сколько он весит.

Заранее спасибо!


javascript google-visualization data-visualization sankey-diagram
person Veck Hsiao    schedule 03.11.2015    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Карты Google на самом деле не способны к такой настройке.

Это решение, на которое вы ссылались, кажется хорошим компромиссом, если вы решили использовать диаграммы Google. Если вы предпочитаете использовать ярлыки вместо использования диаграмм Google, я бы посоветовал изучить d3.js, который позволяет столько настроек, сколько вы можете себе представить.

введите описание изображения здесь

Используя d3.js и плагин диаграммы Sankey, я создал нужный график, добавив строки:

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

person Charles Clayton    schedule 03.11.2015
comment
Спасибо crclayton! Это то, что мне нужно. Пойду на d3.js. - person Veck Hsiao; 04.11.2015
comment
Ух ты! Это действительно полезный и хороший пример санки-диаграммы. Узлы можно даже сортировать вручную путем перетаскивания. Спасибо за отличный JSfiddle! - person Robert; 03.12.2017