Google图表问题与Sankey图表

时间：2016-09-02 05:45:15

标签： javascript charts google-visualization

我有一张Sankey图表。它有2个部分 - 蔬菜和Frutis。我不想要蔬菜的触手。

这可能吗？

以下是截图：

Issue

这是我目前的Sankey Chart代码：

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

1 个答案:

答案 0 :(得分：4)

您可以使用空白字符串（''）删除单词null

和（1）的权重值，以减少链接的大小

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

请参阅以下工作代码段...

＆＃13;
＆＃13; 
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);
}
＆＃13; 
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="sankey_basic"></div>
＆＃13;
＆＃13;
＆＃13;

我尝试了几种不同的值组合

使用负权重值（-1）似乎可以产生您想要的结果

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

但是 - 图表会截断文字的一半

尝试了几次调整来修复截止，没有运气 如大小，填充，边距，字体等......

也许你可以让它发挥作用，请参阅以下片段......

＆＃13;
＆＃13; 
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);
}
＆＃13; 
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="sankey_basic"></div>
＆＃13;
＆＃13;
＆＃13;

编辑

因为没有标准选项可用于实现所需的结果，
图表的svg可以直接修改

图表将尝试以恢复每个事件的自然外观和感觉，
因此需要修改 'ready'，'select'，'onmouseover'等等......

请参阅以下工作片段，了解所需结果，
可能需要添加另一个或两个事件，
或者你可能想到另一种方法......

＆＃13;
＆＃13; 
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);
}
＆＃13; 
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="sankey_basic"></div>
＆＃13;
＆＃13;
＆＃13;

更新

上述解决方案有效，但某些事件滞后 并且 Vegetables 行上的突出显示为＆＃34; flicker＆＃34;或者＆＃34;眨眼＆＃34;
因为它在某些事件中显示，然后被删除

使用MutationObserver可以让我们在应用之前删除突出显示 从而消除了＆＃34;闪烁＆＃34;在上一个例子中可以看到

使用MutationObserver ...

查看以下工作代码段

＆＃13;
＆＃13; 
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);
}
＆＃13; 
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="sankey_basic"></div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题