Bảng xếp hạng Google Charts - ẩn cột

Question

Tôi sử dụng trang tổng quan biểu đồ google để hiển thị biểu đồ đường và tôi muốn kiểm soát các yếu tố được hiển thị trong thời gian chạy. ví dụ:

function drawVisualization() { 
// Create and populate the data table. 
var data = google.visualization.arrayToDataTable([ 
    ['x', 'Cats', 'Blanket 1', 'Blanket 2'], 
    ['A', 1,  1,   0.5  ], 
    ['B', 2,  0.5,   1  ], 
    ['C', 4,  1,   0.5  ], 
    ['D', 8,  0.5,   1  ], 
    ['E', 7,  1,   0.5  ], 
    ['F', 7,  0.5,   1  ], 
    ['G', 8,  1,   0.5  ], 
    ['H', 4,  0.5,   1  ], 
    ['I', 2,  1,   0.5  ], 
    ['J', 3.5,  0.5,   1  ], 
    ['K', 3,  1,   0.5  ], 
    ['L', 3.5,  0.5,   1  ], 
    ['M', 1,  1,   0.5  ], 
    ['N', 1,  0.5,   1  ] 
]); 

// Create and draw the visualization. 
new google.visualization.LineChart(document.getElementById('visualization')). 
    draw(data, {curveType: "function", 
       width: 500, height: 400, 
       vAxis: {maxValue: 10}} 
    ); 
} 

Tôi muốn kiểm soát tầm nhìn của Cats, Blanket 1 và Blanket 2 theo một cách tương tự như cách nó đã được thực hiện trong this Google Charts category filter example.

Answer 1

Một cách là sử dụng giá trị cờ để ánh xạ tới Mèo/Chăn 1/Chăn 2 và sau đó gọi hàm theo cách khởi tạo dữ liệu phù hợp.

google.charts.load('current', {packages: ['corechart']}); 
 

 
function drawVisualization(flag) { 
 
    if(flag=="cats") 
 
     var data = google.visualization.arrayToDataTable([ 
 
     ['x', 'Cats' ], 
 
     ['A', 1 ], 
 
     ['B', 2 ], 
 
     ['C', 4 ], 
 
     ['D', 8 ], 
 
     ['E', 7 ], 
 
     ['F', 7 ], 
 
     ['G', 8 ], 
 
     ['H', 4 ], 
 
     ['I', 2 ], 
 
     ['J', 3.5 ], 
 
     ['K', 3 ], 
 
     ['L', 3.5 ], 
 
     ['M', 1 ], 
 
     ['N', 1 ] 
 
     ]); 
 

 
    else if (flag=="Blanket 1") 
 
     var data = google.visualization.arrayToDataTable([ 
 
     ['x', 'Blanket 1'], 
 
     ['A', 1], 
 
     ['B', 0.5], 
 
     ['C', 1], 
 
     ['D', 0.5], 
 
     ['E', 1], 
 
     ['F', 0.5], 
 
     ['G', 1], 
 
     ['H', 0.5], 
 
     ['I', 1], 
 
     ['J', 0.5], 
 
     ['K', 1], 
 
     ['L', 0.5], 
 
     ['M', 1 ], 
 
     ['N', 0.5 ] 
 
     ]); 
 

 
    else if(flag=="Blanket 2") 
 
     var data = google.visualization.arrayToDataTable([ 
 
     ['x', 'Blanket 2'], 
 
     ['A', 0.5], 
 
     ['B', 1], 
 
     ['C', 0.5], 
 
     ['D', 1], 
 
     ['E', 0.5], 
 
     ['F', 1], 
 
     ['G', 0.5], 
 
     ['H', 1], 
 
     ['I', 0.5], 
 
     ['J', 1], 
 
     ['K', 0.5], 
 
     ['L', 1], 
 
     ['M', 0.5], 
 
     ['N', 1] 
 
     ]); 
 

 
    else 
 
     var data = google.visualization.arrayToDataTable([ 
 
     ['x', 'Cats', 'Blanket 1', 'Blanket 2'], 
 
     ['A', 1,  1,   0.5], 
 
     ['B', 2,  0.5,   1], 
 
     ['C', 4,  1,   0.5], 
 
     ['D', 8,  0.5,   1], 
 
     ['E', 7,  1,   0.5], 
 
     ['F', 7,  0.5,   1], 
 
     ['G', 8,  1,   0.5], 
 
     ['H', 4,  0.5,   1], 
 
     ['I', 2,  1,   0.5], 
 
     ['J', 3.5,  0.5,   1], 
 
     ['K', 3,  1,   0.5], 
 
     ['L', 3.5,  0.5,   1], 
 
     ['M', 1,  1,   0.5], 
 
     ['N', 1,  0.5,   1] 
 
     ]); 
 
    
 
    new google.visualization.LineChart(document.getElementById('visualization')). 
 
     draw(data, {curveType: "function", 
 
        width: 500, height: 400, 
 
        vAxis: {maxValue: 10}} 
 
     ); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div class="btn-group" role="group" aria-label="..."> 
 
    <button type="button" class="btn btn-default" onclick="drawVisualization('Cats')">Cats</button> 
 
    <button type="button" class="btn btn-default" onclick="drawVisualization('Blanket 1')">Blanket 1</button> 
 
    <button type="button" class="btn btn-default" onclick="drawVisualization('Blanket 2')">Blanket 2</button> 
 
</div> 
 

 
<div id="visualization"></div>

Answer 2

tôi sẽ khuyên bạn sử dụng một DataView để ẩn các cột ...

google.charts.load('current', { 
 
    packages: ['corechart'], 
 
    callback: drawVisualization 
 
}); 
 

 
function drawVisualization(category) { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['x', 'Cats', 'Blanket 1', 'Blanket 2'], 
 
    ['A', 1,  1,   0.5], 
 
    ['B', 2,  0.5,   1], 
 
    ['C', 4,  1,   0.5], 
 
    ['D', 8,  0.5,   1], 
 
    ['E', 7,  1,   0.5], 
 
    ['F', 7,  0.5,   1], 
 
    ['G', 8,  1,   0.5], 
 
    ['H', 4,  0.5,   1], 
 
    ['I', 2,  1,   0.5], 
 
    ['J', 3.5,  0.5,   1], 
 
    ['K', 3,  1,   0.5], 
 
    ['L', 3.5,  0.5,   1], 
 
    ['M', 1,  1,   0.5], 
 
    ['N', 1,  0.5,   1] 
 
    ]); 
 

 
    var chart = new google.visualization.LineChart(document.getElementById('visualization')); 
 
    var options = { 
 
    curveType: 'function', 
 
    width: 500, 
 
    height: 400, 
 
    vAxis: { 
 
     maxValue: 10 
 
    } 
 
    }; 
 

 
    var view = new google.visualization.DataView(data); 
 
    var viewColumns = [0]; 
 

 
    switch (category) { 
 
    case 'Cats': 
 
     viewColumns.push(1); 
 
     break; 
 

 
    case 'Blanket 1': 
 
     viewColumns.push(2); 
 
     break; 
 

 
    case 'Blanket 2': 
 
     viewColumns.push(3); 
 
     break; 
 

 
    default: 
 
     viewColumns.push(1); 
 
     viewColumns.push(2); 
 
     viewColumns.push(3); 
 
    } 
 

 
    view.setColumns(viewColumns); 
 
    chart.draw(view, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="btn-group"> 
 
    <button type="button" class="btn btn-default" onclick="drawVisualization()">All</button> 
 
    <button type="button" class="btn btn-default" onclick="drawVisualization('Cats')">Cats</button> 
 
    <button type="button" class="btn btn-default" onclick="drawVisualization('Blanket 1')">Blanket 1</button> 
 
    <button type="button" class="btn btn-default" onclick="drawVisualization('Blanket 2')">Blanket 2</button> 
 
</div> 
 
<div id="visualization"></div>