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寬度

回答

相關問題