Question

我试图将c3.js中的折线图绑定到Shiny中的自定义输出。出于某种原因，它没有绘制图表。这是我的代码：

应用于LineChart-binding.js

var binding = new Shiny.OutputBinding();

binding.find = function(scope) {
  return $(scope).find(".nvd3-linechart");
};

binding.renderValue = function(el, messages) {
  var $el = $(el);  

  c3.generate({
   bindto: '#chart',
   data: {
        columns: [
          ['data1', 30, 200, 100, 400, 150, 250],
          ['data2', 550, 204, 104, 404, 145, 245],
                ['data3', 450, 420, 410, 440, 415, 425],
                ['data4', 350, 320, 310, 340, 315, 325],
                ['data5', 250, 220, 210, 240, 215, 225],
                ['data6', 150, 120, 110, 140, 115, 125]
        ]
    }
});

};

Shiny.outputBindings.register(binding, "shinyjsexamples.nvd3-linechart");

global.R

source("linechart.R")

server.R

shinyServer(function(input, output, session) {

  output$mychart <- renderLineChart({
    Return a data frame. Each column will be a series in the line chart.
    data.frame(
      Sine = sin(1:100/10 + input$sinePhase * pi/180) * input$sineAmplitude,
      Cosine = 0.5 * cos(1:100/10),
      "Sine 2" = sin(1:100/10) * 0.25 + 0.5
    )
  })
})

ui.R

shinyUI(fluidPage(
  tags$h2("JavaScript output binding example"),
  fluidRow(
    column(width=6,
      p("This Shiny app is an adaptation of the",
        a(href="http://nvd3.org/examples/line.html", "Simple Line Chart"),
        "example for the",
        a(href="http://nvd3.org/", "NVD3.js"),
        "JavaScript charting library."
      ),
      p("Source code:",
        a(href="https://github.com/jcheng5/shiny-js-examples/tree/master/output", "@jcheng5/shiny-js-examples/output"))
    )
  ),
  fluidRow(
    column(width=12,
      lineChartOutput("chart")
    ),
    column(width=3,
      sliderInput("sinePhase", "Sine phase", -180, 180, 0, step=10,
        animate=animationOptions(interval=100, loop=TRUE)),
      sliderInput("sineAmplitude", "Sine amplitude", -2, 2, 1, step=0.1,
        animate=animationOptions(interval=100, loop=TRUE))
    )
  )
))

linechart.R

library(shiny)

# To be called from ui.R
lineChartOutput <- function(inputId, width="100%", height="400px") {
  style <- sprintf("width: %s; height: %s;",
    validateCssUnit(width), validateCssUnit(height))

  tagList(
    # Include CSS/JS dependencies. Use "singleton" to make sure that even
    # if multiple lineChartOutputs are used in the same page, we'll still
    # only include these chunks once.
    singleton(tags$head(
      tags$script(src="d3/d3.v3.min.js"),
      tags$script(src="c3.min.js"),
      tags$link(rel="stylesheet", type="text/css", href="c3.min.css"),
      tags$script(src="linechart-binding.js")
    )),
    div(id=inputId, class="nvd3-linechart", style=style)
  )
}

# To be called from server.R
renderLineChart <- function(expr, env=parent.frame(), quoted=FALSE) {
  # This piece of boilerplate converts the expression `expr` into a
  # function called `func`. It's needed for the RStudio IDE's built-in
  # debugger to work properly on the expression.

  installExprFunction(expr, "func", env, quoted)

  function() {
    dataframe <- func()

#     mapply(function(col, name) {
# 
#       values <- mapply(function(val, i) {
#         list(x = i, y = val)
#       }, col, 1:nrow(dataframe), SIMPLIFY=FALSE, USE.NAMES=FALSE)
# 
#       list(key = name, values = values)
#       
#     }, dataframe, names(dataframe), SIMPLIFY=FALSE, USE.NAMES=FALSE)
    data = func();
   }
}

我没有将任何数据从服务器传递到java脚本，只是尝试将c3.js用作自定义输出到闪亮。我在javascript文件中放入了数据（linechart-binding.js）。这可能很简单，但我无法弄清楚。

闪亮的自定义输出绑定

0 个答案: