Google Charts 대시 보드 - 열 숨기기

꺾은 선형 차트를 표시하기 위해 Google 차트 대시 보드를 사용하며 런타임에 표시된 요소를 제어하고 싶습니다. 예를 들어 :Google Charts 대시 보드 - 열 숨기기

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}} 
    ); 
}

내가이 this Google Charts category filter example에서 수행되는 방식과 유사한 방식으로 Cats, Blanket 1 및 Blanket 2의 가시성을 제어하고 싶습니다.

출처

2012-11-22 Tal Yaari

깃발 값을 사용하여 Cats/Blanket 1/Blanket 2에 매핑 한 다음 적절한 데이터 초기화로 함수를 호출하는 것이 한 가지 방법입니다.

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>

출처

2016-02-18 07:08:28 Jay

@Tal Yaari 또 다른 방법은 배열을 초기화하는 것 및 아래 함수를 사용하여 인덱스에 따라 배열을 수정하고 그에 따라 차트를 다시 초기화하십시오. – Jay

안녕하세요, 귀하의 도움에 감사드립니다. 나는 이미이 문제를 해결했지만 3 년이 넘었 기 때문에 기억이 안 난다. –

+17

[게시물]을 배울 수있는 [도움]을 다시 방문하는 것이 더 좋다. 스택 오버플로는 ** 토론이 아닌 ** 포럼이며, – rene

나는 열을 숨길 수 DataView를 사용하는 것이 좋습니다 것입니다 ...

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>

출처

2016-02-24 13:40:15 WhiteHat

Google Charts 대시 보드 - 열 숨기기

답변

관련 문제