Kendo UI - 並排顯示圖表

我必須做的是所有圖表並排顯示嗎？Kendo UI - 並排顯示圖表

我試圖把它插入到

「DIV CLASS =」行」

但it's不工作

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css"> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>    
</head> 
<body> 
    <div class="k-content"> 
     <div id="example_1"></div> 
     <div id="example_2"></div> 
     <div id="example_3"></div> 
     <div id="example_4"></div> 
     <div id="example_5"></div> 
    </div> 

<script> 
    var seriesData = [{ 
     productname: "Product One", 
     volume: 65.50 
    }]; 

    $(document).ready(function() { 
    // ----------------------------------------------------------------------- 
    function createChart(ChartType, Placeholder, MaxValue) { 

     $("#" + Placeholder).kendoChart({ 
      theme: "metro", 
      title: { 
       font: "12px Arial,Helvetica,sans-serif", 
       color: "#29952D", 
       text: "Name: " + Placeholder 
      }, 
      dataSource: { 
       data: seriesData 
      },   
      seriesDefaults: { 
       labels: { 
        template: "#=kendo.format('{0:n2}', (Math.abs(value)))# ltr", 
        position: "outsideEnd", 
        visible: true, 
        background: "transparent" 
       } 
      },        
      series: [{ 
       type: ChartType, 
       field: "volume", 
       categoryField: "productname", 
      }],  
      valueAxis: [{ 
       min: 0, 
       max: MaxValue 
      }], 
      chartArea: { 
       width: 125, 
       height: 175     
      }, 
      tooltip: { 
       template: "#=kendo.format('{0:n2}', (Math.abs(value)))# ltr",    
       visible: true 
      }, 
     }) // kendoChart 
    } // function 
    // -------------------------------------------------------------------   
    createChart("column", "example_1", 200);  
    createChart("column", "example_2", 250); 
    createChart("column", "example_3", 300); 
    createChart("column", "example_4", 100); 
    createChart("pie", "example_5", 450); 
    // ----------------------------------------------------------------------- 
    }); // $(document).ready(function() 
</script>  

</body> 
</html>

來源

2015-11-17 Bettelbursche

你可以發佈從一個瀏覽器（查看源代碼）的_rendered_ HTML和相關的CSS？這將幫助我們更好地幫助你:) – Kyle

您可以使用css float: left和width: 20%（也刪除從圖表的寬度設置，讓它充滿格）：

<div class="k-content"> 
    <div id="example_1" class="sidebyside"></div> 
    <div id="example_2" class="sidebyside"></div> 
    <div id="example_3" class="sidebyside"></div> 
    <div id="example_4" class="sidebyside"></div> 
    <div id="example_5" class="sidebyside"></div> 
</div> 

.sidebyside { 
    width: 20%; 
    float: left; 
}

更新FIDDLE

來源

2015-11-17 14:12:52 ezanker

我使用這個： .sidebyside { \t \t margin：10px 20px; \t float：left; \t} – Bettelbursche

Kendo UI - 並排顯示圖表

回答

相關問題