Вывод диаграммы Google с диаграммой Санки

У меня есть диаграмма Санки. Он имеет 2 секции - Овощи и Фрутис. Я не хочу щупальца для овощей.Вывод диаграммы Google с диаграммой Санки

Возможно ли это?

Вот скриншот:

Это мой текущий код Санки диаграммы:

<html> 
    <head> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 

    <style> 
     .my-padding { 
      margin-top: 50px; 
      margin-bottom: 50px; 
      margin-right:50px; 
     } 
     </style> 
    <script type="text/javascript"> 
     google.charts.load('current', {'packages':['sankey']}); 
     google.charts.setOnLoadCallback(drawChart); 

     function drawChart() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'From'); 
     data.addColumn('string', 'To'); 
     data.addColumn('number', 'Weight'); 
     data.addRows([ 


     [ 'Vegetables 70.2%',, 70.2], 

      [ 'Fruits 29.8%', 'Orange 9%', 9 ], 
      [ 'Fruits 29.8%', 'Apple 8.6%', 8.6 ], 
      [ 'Fruits 29.8%', 'Banana 7.9%', 7.9 ], 
      [ 'Fruits 29.8%', 'Grapes 4.3%', 4.3 ], 

      [ 'Orange 9%', 'Apple 4.0%', 4.0 ], 
      [ 'Orange 9%', 'Banana 3.2%', 3.2 ], 
      [ 'Orange 9%', 'Grapes 1.7%', 1.7 ], 

      [ 'Apple 8.6%', 'Orange 4.8%', 4.8 ], 
      [ 'Apple 8.6%', 'Banana 2.0%', 2.0 ], 
      [ 'Apple 8.6%', 'Grapes 1.8%', 1.8 ], 

      [ 'Banana 7.9%', 'Orange 3.4%', 3.4 ], 
      [ 'Banana 7.9%', 'Apple 2.9%', 2.9 ], 
      [ 'Banana 7.9%', 'Grapes 2.4%', 1.7 ], 

      [ 'Grapes 4.3%', 'Orange 1.6%', 1.6 ], 
      [ 'Grapes 4.3%', 'Banana 1.4%', 1.4 ], 
      [ 'Grapes 4.3%', 'Apple 1.3%', 1.3 ], 

     ]); 

     // Sets chart options. 
     var options = { 
      width: 1000, 
      height:600, 
      sankey: { 
       node: { 
        label: { 
        fontName: 'sans-serif', 
        fontSize: 17, 
        color: '#000', 
        bold: true, 
        italic: false 
        }, 
        interactivity: true, // Allows you to select nodes. 
        labelPadding: 10,  // Horizontal distance between the label and the node. 
        nodePadding: 10,  // Vertical distance between nodes. 

       } 
       } 
     }; 

     // Instantiates and draws our chart, passing in some options. 
     var chart = new google.visualization.Sankey(document.getElementById('sankey_basic')); 
     chart.draw(data, options); 
     } 
    </script> 
    </head> 
    <body> 
     <div class="container">   
        <div class="row" > 
      <div class="col-md-6 my-padding"> 
       <div id="sankey_basic" ></div> 
      </div> 
        </div> 
     </div> 
    </body> 
</html>

источник

2016-09-02 dang

Не могли бы вы рассказать о том, что именно вы хотите? Я не вижу в образце щупалец. – Guenther

@Guenther - добавлен скриншот. – dang

вы можете использовать пустую строку (''), чтобы избавиться от слова null

и значение веса (1), чтобы уменьшить размер ссылки

[ 'Vegetables 70.2%','', 1],

см следующий рабочий фрагмент кода ...

google.charts.load('current', {'packages':['sankey']}); 
 
google.charts.setOnLoadCallback(drawChart); 
 

 
function drawChart() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'From'); 
 
    data.addColumn('string', 'To'); 
 
    data.addColumn('number', 'Weight'); 
 
    data.addRows([ 
 

 

 
    [ 'Vegetables 70.2%','', 1], 
 

 
    [ 'Fruits 29.8%', 'Orange 9%', 9 ], 
 
    [ 'Fruits 29.8%', 'Apple 8.6%', 8.6 ], 
 
    [ 'Fruits 29.8%', 'Banan 7.9%', 7.9 ], 
 
    [ 'Fruits 29.8%', 'Grapes 4.3%', 4.3 ], 
 

 
    [ 'Orange 9%', 'Apple 4.0%', 4.0 ], 
 
    [ 'Orange 9%', 'Banana 3.2%', 3.2 ], 
 
    [ 'Orange 9%', 'Grapes 1.7%', 1.7 ], 
 

 
    [ 'Apple 8.6%', 'Orange 4.8%', 4.8 ], 
 
    [ 'Apple 8.6%', 'Banana 2.0%', 2.0 ], 
 
    [ 'Apple 8.6%', 'Grapes 1.8%', 1.8 ], 
 

 
    [ 'Banana 7.9%', 'Orange 3.4%', 3.4 ], 
 
    [ 'Banana 7.9%', 'Apple 2.9%', 2.9 ], 
 
    [ 'Banana 7.9%', 'Grapes 2.4%', 1.7 ], 
 

 
    [ 'Grapes 4.3%', 'Orange 1.6%', 1.6 ], 
 
    [ 'Grapes 4.3%', 'Banana 1.4%', 1.4 ], 
 
    [ 'Grapes 4.3%', 'Apple 1.3%', 1.3 ], 
 

 
    ]); 
 

 
    // Sets chart options. 
 
    var options = { 
 
    width: 1000, 
 
    height:600, 
 
    sankey: { 
 
      node: { 
 
      label: { 
 
       fontName: 'sans-serif', 
 
       fontSize: 17, 
 
       color: '#000', 
 
       bold: true, 
 
       italic: false 
 
      }, 
 
      interactivity: true, // Allows you to select nodes. 
 
      labelPadding: 10,  // Horizontal distance between the label and the node. 
 
      nodePadding: 10,  // Vertical distance between nodes. 
 

 
      } 
 
     } 
 
    }; 
 

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

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="sankey_basic"></div>

я попробовал несколько другое значение комбо

используя отрицательное значение веса (-1) приводит точно, что вы хотите

[ 'Vegetables 70.2%','', -1],

НО - разрезы диаграммы от половины текста

пытался несколько регулировок, чтобы исправить обрезание, не повезло
, такие как размер, отступы, поля, шрифт и т.д ...

может быть, вы можете заставить его работать, увидеть следующий фрагмент кода ...

google.charts.load('current', {'packages':['sankey']}); 
 
google.charts.setOnLoadCallback(drawChart); 
 

 
function drawChart() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'From'); 
 
    data.addColumn('string', 'To'); 
 
    data.addColumn('number', 'Weight'); 
 
    data.addRows([ 
 

 

 
    [ 'Vegetables 70.2%','', -1], 
 

 
    [ 'Fruits 29.8%', 'Orange 9%', 9 ], 
 
    [ 'Fruits 29.8%', 'Apple 8.6%', 8.6 ], 
 
    [ 'Fruits 29.8%', 'Banan 7.9%', 7.9 ], 
 
    [ 'Fruits 29.8%', 'Grapes 4.3%', 4.3 ], 
 

 
    [ 'Orange 9%', 'Apple 4.0%', 4.0 ], 
 
    [ 'Orange 9%', 'Banana 3.2%', 3.2 ], 
 
    [ 'Orange 9%', 'Grapes 1.7%', 1.7 ], 
 

 
    [ 'Apple 8.6%', 'Orange 4.8%', 4.8 ], 
 
    [ 'Apple 8.6%', 'Banana 2.0%', 2.0 ], 
 
    [ 'Apple 8.6%', 'Grapes 1.8%', 1.8 ], 
 

 
    [ 'Banana 7.9%', 'Orange 3.4%', 3.4 ], 
 
    [ 'Banana 7.9%', 'Apple 2.9%', 2.9 ], 
 
    [ 'Banana 7.9%', 'Grapes 2.4%', 1.7 ], 
 

 
    [ 'Grapes 4.3%', 'Orange 1.6%', 1.6 ], 
 
    [ 'Grapes 4.3%', 'Banana 1.4%', 1.4 ], 
 
    [ 'Grapes 4.3%', 'Apple 1.3%', 1.3 ], 
 

 
    ]); 
 

 
    // Sets chart options. 
 
    var options = { 
 
    width: 1000, 
 
    height:600, 
 
    sankey: { 
 
      node: { 
 
      label: { 
 
       fontName: 'sans-serif', 
 
       fontSize: 17, 
 
       color: '#000', 
 
       bold: true, 
 
       italic: false 
 
      }, 
 
      interactivity: true, // Allows you to select nodes. 
 
      labelPadding: 10,  // Horizontal distance between the label and the node. 
 
      nodePadding: 10,  // Vertical distance between nodes. 
 

 
      } 
 
     } 
 
    }; 
 

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

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="sankey_basic"></div>

EDIT

, поскольку ни стандартные опции не доступны для достижения желаемого результата,
SVG графике может быть изменен непосредственно

диаграмма будет попытаться вернуться к это естественно посмотрите на каждое событие,
, поэтому его необходимо изменить на
'ready', 'select', 'onmouseover' и т.д ...

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

google.charts.load('current', {'packages':['sankey']}); 
 
google.charts.setOnLoadCallback(drawChart); 
 

 
function drawChart() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'From'); 
 
    data.addColumn('string', 'To'); 
 
    data.addColumn('number', 'Weight'); 
 
    data.addRows([ 
 

 

 
    [ 'Vegetables 70.2%','', 1], 
 

 
    [ 'Fruits 29.8%', 'Orange 9%', 9 ], 
 
    [ 'Fruits 29.8%', 'Apple 8.6%', 8.6 ], 
 
    [ 'Fruits 29.8%', 'Banan 7.9%', 7.9 ], 
 
    [ 'Fruits 29.8%', 'Grapes 4.3%', 4.3 ], 
 

 
    [ 'Orange 9%', 'Apple 4.0%', 4.0 ], 
 
    [ 'Orange 9%', 'Banana 3.2%', 3.2 ], 
 
    [ 'Orange 9%', 'Grapes 1.7%', 1.7 ], 
 

 
    [ 'Apple 8.6%', 'Orange 4.8%', 4.8 ], 
 
    [ 'Apple 8.6%', 'Banana 2.0%', 2.0 ], 
 
    [ 'Apple 8.6%', 'Grapes 1.8%', 1.8 ], 
 

 
    [ 'Banana 7.9%', 'Orange 3.4%', 3.4 ], 
 
    [ 'Banana 7.9%', 'Apple 2.9%', 2.9 ], 
 
    [ 'Banana 7.9%', 'Grapes 2.4%', 1.7 ], 
 

 
    [ 'Grapes 4.3%', 'Orange 1.6%', 1.6 ], 
 
    [ 'Grapes 4.3%', 'Banana 1.4%', 1.4 ], 
 
    [ 'Grapes 4.3%', 'Apple 1.3%', 1.3 ], 
 

 
    ]); 
 

 
    // Sets chart options. 
 
    var options = { 
 
    width: 1000, 
 
    height:600, 
 
    sankey: { 
 
      node: { 
 
      label: { 
 
       fontName: 'sans-serif', 
 
       fontSize: 17, 
 
       color: '#000', 
 
       bold: true, 
 
       italic: false 
 
      }, 
 
      interactivity: true, // Allows you to select nodes. 
 
      labelPadding: 10,  // Horizontal distance between the label and the node. 
 
      nodePadding: 10,  // Vertical distance between nodes. 
 

 
      } 
 
     } 
 
    }; 
 

 
    // Instantiates and draws our chart, passing in some options. 
 
    var container = document.getElementById('sankey_basic'); 
 
    container.addEventListener('mouseover', fixVeggies, false); 
 
    container.addEventListener('mouseout', fixVeggies, false); 
 

 
    var chart = new google.visualization.Sankey(container); 
 
    google.visualization.events.addListener(chart, 'ready', fixVeggies); 
 
    google.visualization.events.addListener(chart, 'select', fixVeggies); 
 
    google.visualization.events.addListener(chart, 'onmouseover', fixVeggies); 
 
    google.visualization.events.addListener(chart, 'onmouseout', fixVeggies); 
 

 
    function fixVeggies() { 
 
    container.getElementsByTagName('path')[0].setAttribute('fill', '#ffffff'); 
 
    container.getElementsByTagName('rect')[0].setAttribute('fill', '#ffffff'); 
 
    container.getElementsByTagName('rect')[1].setAttribute('fill', '#ffffff'); 
 
    } 
 

 
    chart.draw(data, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="sankey_basic"></div>

UPDATE

выше решение работает, но некоторые события отстают
и подсвечивание на овощам строка появляется в "мерцание" или "мигать"
, как показано на некоторых событиях, затем удален

с помощью MutationObserver позволяет снять выделение перед нанесением
, таким образом, удаляя «мерцание» видели в предыдущем примере

см следующий рабочий фрагмент кода с использованием MutationObserver ...

google.charts.load('current', {'packages':['sankey']}); 
 
google.charts.setOnLoadCallback(drawChart); 
 

 
function drawChart() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'From'); 
 
    data.addColumn('string', 'To'); 
 
    data.addColumn('number', 'Weight'); 
 
    data.addRows([ 
 
    [ 'Vegetables 70.2%','', 1], 
 

 
    [ 'Fruits 29.8%', 'Orange 9%', 9 ], 
 
    [ 'Fruits 29.8%', 'Apple 8.6%', 8.6 ], 
 
    [ 'Fruits 29.8%', 'Banan 7.9%', 7.9 ], 
 
    [ 'Fruits 29.8%', 'Grapes 4.3%', 4.3 ], 
 

 
    [ 'Orange 9%', 'Apple 4.0%', 4.0 ], 
 
    [ 'Orange 9%', 'Banana 3.2%', 3.2 ], 
 
    [ 'Orange 9%', 'Grapes 1.7%', 1.7 ], 
 

 
    [ 'Apple 8.6%', 'Orange 4.8%', 4.8 ], 
 
    [ 'Apple 8.6%', 'Banana 2.0%', 2.0 ], 
 
    [ 'Apple 8.6%', 'Grapes 1.8%', 1.8 ], 
 

 
    [ 'Banana 7.9%', 'Orange 3.4%', 3.4 ], 
 
    [ 'Banana 7.9%', 'Apple 2.9%', 2.9 ], 
 
    [ 'Banana 7.9%', 'Grapes 2.4%', 1.7 ], 
 

 
    [ 'Grapes 4.3%', 'Orange 1.6%', 1.6 ], 
 
    [ 'Grapes 4.3%', 'Banana 1.4%', 1.4 ], 
 
    [ 'Grapes 4.3%', 'Apple 1.3%', 1.3 ], 
 
    ]); 
 

 
    var options = { 
 
    width: 1000, 
 
    height:600, 
 
    sankey: { 
 
     node: { 
 
     label: { 
 
      fontName: 'sans-serif', 
 
      fontSize: 17, 
 
      color: '#000', 
 
      bold: true, 
 
      italic: false 
 
     }, 
 
     interactivity: true, 
 
     labelPadding: 10, 
 
     nodePadding: 10, 
 
     } 
 
    } 
 
    }; 
 

 
    var container = document.getElementById('sankey_basic'); 
 
    var chart = new google.visualization.Sankey(container); 
 

 
    // remove shading from vegetable row 
 
    var observer = new MutationObserver(function(mutations) { 
 
    mutations.forEach(function (mutation) { 
 
     mutation.addedNodes.forEach(function (node) { 
 
     if (node.tagName === 'path') { 
 
      var desc = node.getAttribute('d').split(','); 
 
      if ((desc.length > 0) && (desc[2] === '0')) { 
 
      node.setAttribute('fill', '#ffffff'); 
 
      } 
 
     } 
 
     if (node.tagName === 'rect') { 
 
      if (parseInt(node.getAttribute('y')) === 0) { 
 
      node.setAttribute('fill', '#ffffff'); 
 
      } 
 
     } 
 
     }); 
 
    }); 
 
    }); 
 
    var config = { childList: true, subtree:true }; 
 
    observer.observe(container, config); 
 

 
    chart.draw(data, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="sankey_basic"></div>

источник

2016-09-02 17:31:18 WhiteHat

спасибо, мы все еще отрезаем. Есть ли альтернатива для диаграммы Санки с использованием другой библиотеки? – dang

диаграмму _can_ можно изменить непосредственно, как только событие '' ready '' срабатывает - и должно быть изменено на событие _every_, чтобы достичь желаемого результата - надеюсь, что это помогает ... – WhiteHat

добавил еще один пример, используя 'MutationObserver', который похоже, работает лучше предыдущего - см. __UPDATE__ выше ... – WhiteHat

Вывод диаграммы Google с диаграммой Санки

ответ

Смежные вопросы