Kendo UI Chart不占用所有div宽度

我正在使用Kendo UI Dataviz来开发我的应用程序，但我在渲染图表时遇到问题。当图表是渲染器时，它不占用宽度的所有div，如下所示。Kendo UI Chart不占用所有div宽度

enter image description here

我的JS代码：

function creatChart() { 
     $("#chart").kendoChart({ 
      dataSource : { 
       transport : { 
        read : { 
         url : "myUrl", 
         dataType : "json", 
        }, 
       } 
      }, 
      legend : { 
       position : "top" 
      }, 
      series : [ { 
       type : "area", 
       field : "valor1", 
       color : "#73c100", 
       axis : "axes1" 
      }, { 
       type : "line", 
       field : "valor2", 
       color : "#007eff", 
       position : "right", 
       axis : "axes2" 
      } ], 
      valueAxes : [ { 
       name : "axes1", 
       color : "#73c100", 
       min : 0, 
       max : 150 
      }, { 
       name : "axes2", 
       color : "#007eff", 
       min : 0, 
       max : 150 
      } ], 
      categoryAxis : { 
       field : "data", 
       labels : { 
        template : "#=$(this).formatDate(value)#", 
        rotation: -35 
       } 
      }, 
      tooltip : { 
       visible : true, 
       format : "{0}" 
      } 
     }); 
    }

我的HTML代码：

      <div id="tabs-1"> 
           <div class="row-fluid" style="padding-top: 45px"> 
            <div class="span2" style="padding-left: 15px; padding-top: 15px; padding-bottom: 15px">Selecione 
            o período: 
            </div> 
            <div class="span3"> 
             <input type="text" class="dataInicio" readonly="readonly" style="margin-top: 15px;"/> 
            </div> 
            <div class="span1"> 
             <label style="margin-top: 15px;">à</label> 
            </div> 
            <div class="span5"> 
             <input type="text" class="dataFim" readonly="readonly" style="margin-top: 15px;"/> 
             <button class="btn submit" style="margin-top: 10px;">Buscar</button> 
            </div> 
           </div> 
           <div class="row-fluid"> 
            <div class="span12"> 
             <div id="chart"></div> 
            </div> 
           </div> 
          </div>

我需要的图表占据所有div宽度。任何人都可以帮助我吗？

来源

2013-05-28 Danilo M.

使用浏览器的调试器的代码，以确定哪些是控制剑道控制的宽度，适当地进行设置。检查span12，row-fluid， – Nick

嗨，感谢您的回答，但我解决了使用此代码'$（“＃chart”）。data（“kendoChart”）。refresh（）;'的问题，当我点击标签时，要访问我的图表，先前的代码已执行，图表已调整大小。谢谢。 –

使用线

chartArea: { margin: 0, padding: 0, height: (screen.height * 0.50), width: (screen.width * 0.35) }, 
plotArea: { margin: 0, padding: 0, height: (screen.height * 0.50), width: (screen.width * 0.35) },

在下面找到

$("#chartNo1").kendoChart({ 

    theme: $(document).data("kendoSkin") || "silver", 


     title: { 
      text: "Store Visits" 
     }, 
     chartArea: { margin: 0, padding: 0, height: (screen.height * 0.50), width: (screen.width * 0.35) }, 
     plotArea: { margin: 0, padding: 0, height: (screen.height * 0.50), width: (screen.width * 0.35) }, 



     legend: { 
      visible: false 
     }, 
     seriesDefaults: { 
      type: "bar" 
     }, 
     series: [{ 
      name: "Total Visits", 
      data: [56000, 63000, 74000, 91000, 117000, 138000] 
     }, { 
      name: "Unique visitors", 
      data: [52000, 34000, 23000, 48000, 67000, 83000] 
}], 
      valueAxis: { 
       max: 140000, 
       line: { 
        visible: false 
       }, 
       minorGridLines: { 
        visible: true 
       } 
      }, 
      categoryAxis: { 
       categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], 
       majorGridLines: { 
        visible: false 
       } 
      }, 
      tooltip: { 
       visible: true, 
       template: "#= series.name #: #= value #" 
      } 
     }); 

    };

来源

2014-04-02 07:49:17

Kendo UI Chart不占用所有div宽度

回答

相关问题