在闪亮的应用程序中调整js图表的大小

Question

我正在使用c3库中的仪表小部件。

它的功能由3个元素组成：

function(Value, width, height) 

当我尝试生成仪表板时，结果如下：

我正在使用这种布局：

splitLayout(C3GaugeOutput("gauge1","auto","auto"),
                              C3GaugeOutput("gauge2","auto","auto"),
                              C3GaugeOutput("gauge3","auto","auto"))

我试过改变了尺寸，但这个侧栏仍然出现。

C3代码如下：

HTMLWidgets.widget({

  name: 'C3Gauge',

  type: 'output',

  factory: function(el, width, height) {

    return {

        renderValue: function(x) {

        // Check if we have a reference to our chart
        if(typeof(el.chart) == 'undefined'){
            // create a chart and set options
            // note that via the c3.js API we bind the chart to the element with id equal to chart1
            var chart = c3.generate({
                bindto: el,
                data: {
                    json: x,
                    type: 'gauge',
                },
                gauge: {
                    label:{
                        //returning here the value and not the ratio
                        format: function(value, ratio){ return value;}
                    },
                    min: 0,
                    max: 100,
                    width: 15,
                    units: '%' //this is only the text for the label
                }
            });

          el.chart = chart;

        }else{

          // Update the chart if it already exists
          el.chart.load({json: x});
        }

      },

      resize: function(width, height) {

        // TODO: code to re-render the widget with a new size

      }

    };
  }
});

Answer 1

解决：

使用box()功能：

fluidRow(box(C3GaugeOutput("gauge1","auto","auto")),
                              box(C3GaugeOutput("gauge2","auto","auto")),
                              box(C3GaugeOutput("gauge3","auto","auto")))