使Highchart R成为Shiny中盒子的完整宽度和高度

debugcn 发表于 Dev

乔丹·怀恩

您好，我有一个渲染Highchart对象的盒子。我遇到的问题是框中的图表周围有很多空白。有没有办法使图形占据整个空间，而不会显示白色？

library(shiny)
library(bs4Dash)

    df = data.frame(x = 1:100, y =rnorm(100))

 shiny::shinyApp(
  ui = bs4DashPage(
   old_school = FALSE,
   sidebar_min = TRUE,
   sidebar_collapsed = FALSE,
   controlbar_collapsed = FALSE,
   controlbar_overlay = TRUE,
   title = "Basic Dashboard",
   navbar = bs4DashNavbar(),
   sidebar = bs4DashSidebar(),
   controlbar = bs4DashControlbar(),
   footer = bs4DashFooter(),
   body = bs4DashBody(
    fluidRow(
       bs4Card(
          width = 4,
          title = "Net Investing Cash Flow",
          highchartOutput("graph")
        )
    ))
  ),
  server = function(input, output) {
    output$graph = renderHighchart({
      highchart() %>% hc_xAxis(categories = df$x) %>% hc_add_series(name = "Earnings Yield",  data = df$y)%>% hc_add_theme(hc_theme_darkunica())
    })
}
)

贝蒂尔男爵

我们需要覆盖这些框的引导CSS。为了找到我们需要修改的css类，我们从控制台中的box函数打印出结果。

box(
  width = 4,
  title = "Net Investing Cash Flow",
  highchartOutput("graph")
)


<div class="col-sm-4">
  <div class="card card-default">
    <div class="card-header">
      <h3 class="card-title">Net Investing Cash Flow</h3>
      <div class="card-tools">
        <button type="button" class="btn btn-tool" data-card-widget="collapse">
          <i class="fa fa-minus"></i>
        </button>
        <button type="button" class="btn btn-tool" data-card-widget="remove">
          <i class="fa fa-times"></i>
        </button>
      </div>
    </div>
    <div class="card-body">
      <div id="graph" style="width:100%; height:400px; " class="highchart html-widget html-widget-output"></div>
    </div>
  </div>
</div>

现在我们可以看到highchartdiv与类一起放置在中，card-body这意味着我们应该dashboardBody在UI代码中的以下位置添加以下代码。

tags$head(
      tags$style(
        ".card-body {
           padding: 0px;
        }"
      )
    ),

这将覆盖Shinydashboard中的CSS。在tags$head将确保的CSS被放置在头标记您的文档这是我们希望所有的CSS代码的地方。将代码放置在dashboardBody中，将确保staly位于head标签的末尾-我们希望这样做，因为这会使它覆盖之前添加的所有css

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-04-5

我来说两句

0条评论

登录后参与评论

来自分类Dev

angularJS指令中的Highchart

来自分类Dev

HighChart中的打印阵列

来自分类Dev

HighChart中的系列数据

来自分类Dev

angularJS指令中的Highchart

来自分类Dev

在AngularJS中包装HighChart

来自分类Dev

在 R 中的 highchart 内循环

来自分类Dev

如何更改 HighChart 中“yAxis 标签”的宽度？

来自分类Dev

highchart r 上的法语字符

来自分类Dev

限制Highchart中的数据点

来自分类Dev

价格线在HighChart中消失

来自分类Dev

Highchart工具提示中的逗号

来自分类Dev

Highchart未显示在cakephp中

来自分类Dev

Internet Explorer中的Highchart导出

来自分类Dev

highchart highstock不显示完整的yAxis数据

来自分类Dev

带有Highchart的PHP和MySQL

来自分类Dev

在highchart的顶部和底部显示stackLabel

来自分类Dev

如何添加Highchart Bar线和标签？

来自分类Dev

highchart结合了馅饼和蜘蛛网

来自分类Dev

Highchart：在工具提示中添加自己的计算

来自分类Dev

javascript变量在Highchart中不起作用

来自分类Dev

Highchart在jQuery函数中不起作用

来自分类Dev

在响应式highchart饼中居中

来自分类Dev

在HighChart Solid Gauge中隐藏YAxis值

来自分类Dev

在HighChart中的xAxis上显示图像

来自分类Dev

Highchart如何放大仪表中的plotBands？

来自分类Dev

如何在HighChart中设置y轴？

来自分类Dev

IE中的HighChart setoptions颜色问题

来自分类Dev

需要在HighChart中链接URL

来自分类Dev

在dotnet highchart中设置图表的大小？

Related 相关文章

文章