Показать текст на диаграмме 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);
  }

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

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

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

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

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


person Veck Hsiao    schedule 03.11.2015    source источник


Ответы (1)


Карты 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