Problem z listą Google wykresu Sankey'a

Mam wykres Sankey'a. Ma 2 sekcje - Warzywa i Frutis. Nie chcę macek do Warzyw.Problem z listą Google wykresu Sankey'a

Czy to możliwe?

Oto zrzut ekranu:

To jest mój aktualny kod na wykresie Sankey:

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

Źródło

2016-09-02 dang

Czy możesz dokładnie wyjaśnić, czego dokładnie chcesz? Nie widzę żadnych macek w próbce. – Guenther

@Guenther - dodano zrzut ekranu. – dang

można użyć pusty ciąg (''), aby pozbyć się tego słowa null

i wartość masy (1) w celu zmniejszenia rozmiaru łącza

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

patrz poniższy fragment pracy ...

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>

Próbowałem kilka różnych combo wartość

użyciu ujemną wartość masy (-1) wydaje się dokładnie to, co chcesz

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

ALE - cięcia wykres off połowę tekstu

Próbowaliśmy kilka korekt do ustalenia wartości odcięcia, bez powodzenia
takie jak rozmiar, obicia, marginesy, czcionka, etc ...

może można zmusić go do pracy, patrz poniższy fragment ...

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

ponieważ dostępne, aby osiągnąć pożądany rezultat ma żadnych standardowe opcje
svg wykresu można modyfikować bezpośrednio

wykres będzie spróbować aby przywrócić to naturalne zobacz i czuć na każdym wydarzeniu,
, więc należy je zmodyfikować na
'ready', 'select', 'onmouseover', etc ...

patrz poniższy fragment pracy, do pożądanego rezultatu,
może być konieczne, aby dodać kolejne zdarzenie lub dwa,
czy można ewentualnie pomyśleć o innym podejściu ...

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

powyższe rozwiązanie działa, ale pewne zdarzenia pozostają
i podświetlenie na warzywami rząd wydaje "migotanie" lub "migać"
jak jest pokazywany podczas niektórych wydarzeń, a następnie usunięty

użyciem MutationObserver pozwala nam usunąć podświetlanie przed naniesieniem
usuwając w ten sposób „migotanie” widziany w poprzednim przykładzie

patrz poniższy fragment kodu jest wykonywana przy użyciu 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>

Źródło

2016-09-02 17:31:18 WhiteHat

dziękuję, to nam wciąż odcięte. Czy jest jakaś alternatywa dla wykresu Sankeya przy użyciu innej biblioteki? – dang

wykres _can_ można modyfikować bezpośrednio, po uruchomieniu zdarzenia ''ready'' i trzeba go zmodyfikować na _every_ zdarzeniu, aby osiągnąć pożądany wynik - mam nadzieję, że to pomoże ... – WhiteHat

dodał kolejny przykład używając' MutationObserver' który wydaje się działać lepiej niż poprzednie - patrz __UPDATE__ powyżej ... – WhiteHat

Problem z listą Google wykresu Sankey'a

Odpowiedz

Powiązane problemy