サンキーチャートのGoogleチャート問題

私はサンキューチャートを持っています。それは2つのセクション - 野菜とFrutisを持っています。私は野菜に触手が欲しくない。サンキーチャートの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],

BUT - 半分のテキストオフチャートカットが

は
などなど大きさ、パディング、マージン、フォント、など運で、カットオフを修正するには、いくつかの調整を試してみました...

多分あなたは...それは、仕事次のスニペットを見ることができ

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'、等...

は
、作業スニペット以下、望ましい結果のために、
は別のイベントまたは2を追加する必要があるかもしれ参照するか、あなたはおそらく別のアプローチを考えることがあります...

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

ありがとう、私たちはまだそれを断つ。他のライブラリを使用してSankeyチャートの代替手段はありますか？ – dang

希望の結果を得るために、 '' ready''イベントが発生し、_every_イベントで修正する必要がある場合、チャートを直接変更することができます - – WhiteHat

は 'MutationObserver'を使って別の例を追加しました上記よりもうまくいくようです - 上記の__UPDATE__を見てください... – WhiteHat

サンキーチャートのGoogleチャート問題

答えて

関連する問題