Javascript 如何在googlevis折线图中单击嵌入到shiny中的图例时隐藏该系列

我有一个闪亮的应用程序，使用googlevis软件包嵌入了谷歌折线图。我需要能够隐藏线时，点击它的图例键。我在谷歌图表中找到了这段代码：

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

---

如何将此行为引入到使用shiny创建的图形中？我可以使用“jscode”参数吗？

您可以通过插入一些额外的javascript代码来实现这一点。显示了该技术。调用

gvisLineChart

并将其分配给

x

时，它将返回一个列表。您可以检查以下各项

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

它将返回类似于

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

您可以调整这段javascript代码以实现您的目标。这里举一个例子 a

ui.R

和

server.R

。可以查看结果

#ui.R
图书馆（闪亮）
shinyUI（带侧栏的页面）(
headerPanel（“你好，闪亮！”），
侧边栏面板（“侧边栏”），
主面板（“主”，
htmlOutput（'gtest'））
)
)
#服务器.R
图书馆（闪亮）
图书馆（谷歌）
shinyServer（功能（输入、输出）{
输出$gtest这很有效！谢谢，只是在最后你需要做的，而不是“chart.draw（数据，选项）；”，我们使用了：\n var view=new google.visualization.DataView（数据）；view.setColumns（列）；chart.draw（视图，选项）@jdharison当没有为谷歌图表设置自定义工具提示时，此解决方案非常有效。当我添加自定义工具提示并单击图例时，我得到以下错误：给定轴上的所有系列必须具有相同的数据类型。修改javascript代码以允许自定义工具提示是否可行？@jdharison另外，此解决方案会将您可能分配给series的颜色修改为默认的googleVis颜色。是否可以修改代码以允许自定义颜色？
# 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

  })

})