Question

我必须要做的是所有图表并排显示？

我试图将其插入

“div class =”row“

但它不起作用。

<!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>

Answer 1

您可以使用css float: left和width: 20%（同时从图表中移除宽度设置并让它填充div）：

<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

Kendo UI - 并排显示图表

1 个答案: