googlevis에서 범례를 클릭하면 시리즈를 숨기는 방법 반짝 반짝 빛깔에 끼어있는 선형 차트

Question

googlevis 패키지를 사용하여 Google 꺾은 선형 차트가 포함 된 반짝이는 앱이 있습니다. 범례 키를 클릭 할 때 줄을 숨길 수 있어야합니다.

$http://jsfiddle.net/xDUPF/4/light/$ 

윤곽을 사용하여 만든 그래프에이 비헤이비어를 소개하려면 어떻게해야합니까? "jscode"매개 변수를 사용할 수 있습니까?

Answer 1

추가 자바 스크립트 코드를 삽입하여이를 수행 할 수 있습니다. 기술은 here입니다. gvisLineChart으로 전화를 걸어 x에 지정하면 목록이 반환됩니다. 당신은 당신이 당신의 목표를 달성하기 위해 자바 스크립트 코드의 조각을 조정할 수 있습니다

// jsDrawChart 
function drawChartyourid() { 
var data = gvisDatayourid(); 
var options = {}; 
options["allowHtml"] = true; 
options["series"] = [{targetAxisIndex: 0}, 
               {targetAxisIndex:1}]; 
options["vAxes"] = [{title:'val1'}, {title:'val2'}]; 


    var chart = new google.visualization.LineChart(
    document.getElementById('yourid') 
    ); 
    chart.draw(data,options);  
} 

같은

x$html$chart[['jsDrawChart']] 

다음이 반환됩니다 무언가를 검사 할 수 있습니다. 예를 들어 및 server.R입니다. 결과를 볼 수 있습니다 http://spark.rstudio.com/johnharrison/gvisTest

# ui.R 

library(shiny) 

shinyUI(pageWithSidebar(
    headerPanel("Hello Shiny!"), 

    sidebarPanel("Sidebar"), 
    mainPanel("Main", 
      htmlOutput('gtest')) 
) 

) 


# server.R 
library(shiny) 
library(googleVis) 

shinyServer(function(input, output) { 

    output$gtest <- renderGvis({ 
    df <- data.frame(country=c("US", "GB", "BR"), val1=c(1,3,4), val2=c(23,12,32)) 
    gt <- gvisLineChart(df, xvar="country", yvar=c("val1", "val2"), 
         options=list(title="Hello World", 
            titleTextStyle="{color:'red',fontName:'Courier',fontSize:16}", 
            curveType='function'),chartid = "yourid" 
    ) 
    jsInsert <- "var columns = []; 
    // display these data series by default 
    var defaultSeries = [1,2,3]; 
    var series = {}; 
    for (var i = 0; i < data.getNumberOfColumns(); i++) { 
     if (i == 0 || defaultSeries.indexOf(i) > -1) { 
      // if the column is the domain column or in the default list, display the series 
    columns.push(i); 
    } else { 
    // otherwise, hide it 
    columns[i] = { 
    label: data.getColumnLabel(i), 
    type: data.getColumnType(i), 
    calc: function() { 
    return null; 
    } 
    }; 
    } 
    if (i > 0) { 
    // set the default series option 
    series[i - 1] = {}; 
    if (defaultSeries.indexOf(i) == -1) { 
    // backup the default color (if set) 
    if (typeof (series[i - 1].color) !== 'undefined') { 
    series[i - 1].backupColor = series[i - 1].color; 
    } 
    series[i - 1].color = '#CCCCCC'; 
    } 
    } 
} 
options['series'] = series; 

function showHideSeries() { 
    var sel = chart.getSelection(); 
    // if selection length is 0, we deselected an element 
    if (sel.length > 0) { 
    // if row is undefined, we clicked on the legend 
    if (sel[0].row == null) { 
    var col = sel[0].column; 
    if (columns[col] == col) { 
    // hide the data series 
    columns[col] = { 
    label: data.getColumnLabel(col), 
    type: data.getColumnType(col), 
    calc: function() { 
    return null; 
    } 
    }; 

    // grey out the legend entry 
    series[col - 1].color = '#CCCCCC'; 
    } 
    else { 
    // show the data series 
    columns[col] = col; 
    series[col - 1].color = null; 
    } 
    var view = new google.visualization.DataView(data); 
    view.setColumns(columns); 
    chart.draw(view, options); 
    } 
    } 
    } 

    google.visualization.events.addListener(chart, 'select', showHideSeries); 
    chart.draw(data,options); 
    " 
    gt$html$chart[['jsDrawChart']] <- gsub("chart.draw\\(data,options\\);", jsInsert, gt$html$chart[['jsDrawChart']]) 
    gt 

    }) 

})