Vấn đề biểu đồ của Google với biểu đồ Sankey

Tôi có Biểu đồ Sankey. Nó có 2 phần - Rau và Frutis. Tôi không muốn xúc tu cho rau.Vấn đề biểu đồ của Google với biểu đồ Sankey

Điều đó có khả thi không?

Dưới đây là ảnh chụp màn hình:

Đây là mã hiện tại của tôi cho 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>

Nguồn

2016-09-02 dang

Bạn có thể vui lòng giải thích chính xác bạn muốn gì không? Tôi không thấy bất kỳ xúc tu nào trong mẫu. – Guenther

@Guenther - ảnh chụp màn hình được thêm vào. – dang

bạn có thể sử dụng một chuỗi trống ('') để thoát khỏi từ null

và giá trị trọng số (1) để giảm kích thước của liên kết

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

thấy sau đoạn làm việc ...

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>

tôi đã cố gắng nhiều combo giá trị khác nhau

sử dụng một giá trị trọng lượng tiêu cực (-1) dường như để sản xuất chính xác những gì bạn muốn

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

NHƯNG - việc cắt giảm biểu đồ tắt một nửa số văn bản

thử một số điều chỉnh để sửa chữa cắt, không có may mắn
như kích thước, đệm, lề, phông chữ, vv ...

có lẽ bạn có thể lấy nó để làm việc, xem đoạn sau ...

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

vì không chuẩn tùy chọn có sẵn để đạt được kết quả mong muốn,
svg của biểu đồ có thể được chỉnh sửa trực tiếp

biểu đồ sẽ thử để trở lại nó là điều tự nhiên xem và cảm nhận về từng sự kiện,
để nó cần được sửa đổi trên
.210, 'select', 'onmouseover', vv ...

thấy sau đoạn làm việc, cho kết quả mong muốn,
có thể cần thiết để thêm một sự kiện hoặc hai,
hoặc bạn có thể có thể nghĩ ra cách tiếp cận khác ...

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>

CẬP NHẬT

giải pháp trên hoạt động, nhưng sự kiện nhất định tụt
và nổi bật trên Rau hàng dường như "nhấp nháy" hoặc "nhấp nháy"
như được hiển thị trong một số sự kiện nhất định, sau đó xóa

sử dụng một MutationObserver cho phép chúng ta xóa các đánh dấu trước khi nó được áp dụng
do đó loại bỏ các "nhấp nháy" nhìn thấy trong ví dụ trước

thấy sau đoạn làm việc sử dụng 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>

Nguồn

2016-09-02 17:31:18 WhiteHat

cảm ơn, chúng tôi vẫn bị cắt. Có bất kỳ thay thế cho biểu đồ Sankey sử dụng thư viện khác không? – dang

biểu đồ _can_ được sửa đổi trực tiếp, khi sự kiện ''ready'' kích hoạt - và cần được sửa đổi trên sự kiện _every_, để đạt được kết quả mong muốn - hi vọng điều này sẽ giúp ... – WhiteHat

thêm một ví dụ khác bằng cách sử dụng' MutationObserver' dường như hoạt động tốt hơn so với trước - xem __UPDATE__ ở trên ... – WhiteHat

Vấn đề biểu đồ của Google với biểu đồ Sankey

Trả lời

Các vấn đề liên quan