javascript – 与Sankey图表的谷歌图表问题

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

那可能吗？

这是截图：

这是我目前的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 ],'Apple 8.6%',8.6 ],'Banana 7.9%',7.9 ],'Grapes 4.3%',4.3 ],[ 'Orange 9%','Apple 4.0%',4.0 ],'Banana 3.2%',3.2 ],'Grapes 1.7%',1.7 ],[ 'Apple 8.6%','Orange 4.8%',4.8 ],'Banana 2.0%',2.0 ],'Grapes 1.8%',1.8 ],[ 'Banana 7.9%','Orange 3.4%',3.4 ],'Apple 2.9%',2.9 ],'Grapes 2.4%',[ 'Grapes 4.3%','Orange 1.6%',1.6 ],'Banana 1.4%',1.4 ],'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>

解决方法

您可以使用空白字符串(”)来删除单词null

和(1)的权重值以减小链接的大小

[‘蔬菜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%','','Banan 7.9%',]);

  // Sets chart options.
  var options = {
    width: 1000,sankey: {
          node: {
            label: {
              fontName: 'sans-serif',italic: false
            },// 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)似乎产生了你想要的

[‘蔬菜70.2％’,– 1],

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

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

也许你可以让它工作,请参阅以下片段…

google.charts.load('current',-1],options);
}

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

编辑

因为没有可用的标准选项来达到预期的效果,
图表的svg可以直接修改

图表将尝试恢复每个事件的自然外观和感觉,
所以需要修改它
‘准备’,’选择’,’onmouSEOver’等…

请参阅以下工作代码段,以获得所需的结果,
可能需要添加另一个或两个事件,
或者你可能想到另一种方法……

google.charts.load('current',passing in some options.
  var container = document.getElementById('sankey_basic');
  container.addEventListener('mouSEOver',fixVeggies,false);
  container.addEventListener('mouSEOut',false);

  var chart = new google.visualization.Sankey(container);
  google.visualization.events.addListener(chart,'ready',fixVeggies);
  google.visualization.events.addListener(chart,'select','onmouSEOver','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','Weight');
  data.addRows([
    [ 'vegetables 70.2%',]);

  var options = {
    width: 1000,sankey: {
      node: {
        label: {
          fontName: 'sans-serif',italic: false
        },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>

javascript – 与Sankey图表的谷歌图表问题

解决方法

相关文章