#12 楼 @miclle 现在效果是实现了，直接用 css 覆盖，然后用绝对定位，但感觉非常不优雅，那还真不如用 js 获取高度再改了。

.tab-content{
  position: relative;
  .tab-pane{
    display: block;
    opacity: 0;
    &.active{
      opacity: 1;
    }
  }
  article{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
  }
}

#12 楼 @miclle 额，试了试，先覆盖 bootstrap 默认的，再修改 opacity

.tab-content{
        .tab-pane{
          display: block;
          opacity: 0;
          &.active, :hover{
            opacity: 1;
          }
        }
}

结果宽度倒是对了，但它三个本来是相对定位，所以 A 图在最上面，B 图在中间，C 图在最下面。 切换 tab 的时候，只显示 A，或 B，或 C，但位置不变，也就是说，显示 B 的时候，A 的位置 C 的位置就会是空白……

#12 楼 @miclle 我怎么觉得这么怪？按我的理解，如果 opacity:0，那它是在那里的，三个 tab-content 都在层叠在那，只是有两个透明了你看不见。但你鼠标 hover 或点击，难道不应该就碰到的始终是最上面那层？永远碰不到最下面那层？

#9 楼 @gihnius 没明白。 因为我没有手动去 init tab 相关函数，现在不都是Unobtrusive JavaScript的么？我没有针对这个 tabpanel 写任何的 js，因为 html 里面已经写了data-toggle="tab"

有没有不写 js 来实现的解决方案？

#8 楼 @xhj6 有啊，在 view 中使用，就是丑陋了点。比如我上一个饼图，在 view 中是这么写的

<%= high_chart("asset_allocation_chart", @asset_allocation_chart) do |c| %>
        <%= raw "options.tooltip.formatter = function() {return '<b>'+ this.point.name +'</b>: '+ this.y +' %';}"  %>
        <%= raw "options.plotOptions.pie.dataLabels.formatter = function() {
        if (this.y > 5) return this.point.name + ': ' + Math.round(this.percentage*100)/100 + ' %';; }"  %>
    <% end %>

感觉像是把 js 代码写到 html 里，挺别扭的其实……

#3 楼 @lgn21st 可是为了简洁一点，我现在是只在 controller 里面设置所有参数，在 view 中显示，就没有再在 js 文件中写什么了…… 如果要计算什么的，我想想，是不是应该在 view 中去改些什么东东……

现在我的写法是 view 中：

<div role="tabpanel" class="text-center">
  <ul class="nav nav-tabs text-center" role="tablist">
    <li role="presentation" class="active">
      <a href="#per_week"  class="btn btn-default" aria-controls="per_week" role="tab" data-toggle="tab">一周</a>
    </li>
    <li role="presentation">
      <a href="#per_month"  class="btn btn-default" aria-controls="per_month" role="tab" data-toggle="tab">一月</a>
    </li>
    <li role="presentation">
      <a href="#per_year"  class="btn btn-default" aria-controls="per_year" role="tab" data-toggle="tab">一年</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <article role="tabpanel" class="tab-pane active" id="per_week">
      <%= high_chart("asset_growth_per_week_chart", @asset_growth_per_week_chart)  %>
    </article>
    <article role="tabpanel" class="tab-pane" id="per_month">
      <%= high_chart("asset_growth_per_month_chart", @asset_growth_per_month_chart)  %>
    </article>
    <article role="tabpanel" class="tab-pane" id="per_year">
      <%= high_chart("asset_growth_per_year_chart", @asset_growth_per_year_chart)  %>
    </article>
  </div>

</div>

controller 中

# 资产增长 - 每周
   @asset_growth_per_week_chart = LazyHighCharts::HighChart.new('graph') do |f|
     f.chart({ type: 'line'} )
     series = {
         name: '资金数量',
         data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2]
     }
     f.series(series)
     f.xAxis({categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']})
     f.yAxis({title: {text: '资产数量 (万)'}})
     f.plot_options(line:{
                        allowPointSelect: true,
                        cursor: "pointer" ,
                        color: 'rgb(122, 201, 237)',
                        dataLabels:{enabled: true},
                        enableMouseTracking: false
                    })
   end

#1 楼 @lgn21st 因为我是响应式页面，所以我自己也不知道具体宽度是多少，就没有设置。 有个设置的地方，但要填写的是数字，不让填写百分比，你看它都没有单位……

chart: {
            width: 400,
            height: 300
        },

我只想问，有什么画的？ 我平时用 mindmanager……但感觉好像没有这种线型……

貌似好久之前就已经免费了……

"要做就要做到最好，要做就做原生 APP。"那你们是觉得 rubymotion 能做出这种感觉罗？

#26 楼 @tianlitao 哈哈哈哈哈哈，快跑……

给我们上了深刻的一课……

呀，好期待耶……什么什么时候会正式出 Rails 5 啊？

浪费钱，浪费时间，碍地方……