javascript - mover - como poner nombre a las series de un grafico en excel

Cómo ocultar la serie al hacer clic en una leyenda en el gráfico de líneas de googlevis incrustado en brillante

Question

Tengo una aplicación brillante con gráficos de líneas de google incorporados usando el paquete de googlevis. Necesito poder ocultar una línea al hacer clic en su clave de leyenda. Encontré este código sobre cómo hacerlo en los gráficos de Google:

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

¿Cómo puedo introducir este comportamiento en un gráfico creado con brillante? ¿Puedo usar el parámetro "jscode" para ello?

Answer 1

Puede lograr esto insertando un código extra de javascript. La técnica se muestra aquí . Cuando llama a gvisLineChart y lo asigna a x , devuelve una lista. Puede inspeccionar lo siguiente

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

devolverá algo así como

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

Puede ajustar este fragmento de código javascript para lograr sus objetivos. Como ejemplo, aquí hay ui.R y server.R . El resultado se puede ver 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

  })

})