Jquery 剑道UI-并排显示图表_Jquery_Css_Kendo Ui

Jquery 剑道UI-并排显示图表

jquery css kendo-ui

Jquery 剑道UI-并排显示图表,jquery,css,kendo-ui,Jquery,Css,Kendo Ui,我必须做什么才能使所有图表并排显示我试着把它插进 “div class=”行“ 但它不起作用因此，我建立了一个： var系列数据=[{ 产品名称：“产品一”，卷数：65.50 }]; $（文档）.ready（函数（）{ // ----------------------------------------------------------------------- 函数createChart（ChartType、占位符、MaxValue）{ $（“#”+占位符）主题：“地铁”，标题

我必须做什么才能使所有图表并排显示

我试着把它插进

“div class=”行“

但它不起作用

因此，我建立了一个：


var系列数据=[{
产品名称：“产品一”，
卷数：65.50
}];
$（文档）.ready（函数（）{
// -----------------------------------------------------------------------
函数createChart（ChartType、占位符、MaxValue）{
$（“#”+占位符）
主题：“地铁”，
标题：{
字体：“12px Arial，Helvetica，无衬线”，
颜色：“29952D”，
文本：“名称：”+占位符
},
数据源：{
数据：系列数据
},          
系列默认值：{
标签：{
模板：“#=kendo.format（{0:n2}），（Math.abs（value））#ltr”，
位置：“外侧端”，
可见：对，
背景：“透明”
}
},                              
系列：[{
类型：图表类型，
字段：“卷”，
类别字段：“productname”，
}],     
valueAxis：[{
分:0,，
最大值：最大值
}],
图表区：{
宽度：125，
身高：175
},
工具提示：{
模板：“#=kendo.format（{0:n2}），（Math.abs（value））#ltr”，
可见：正确
},
})//肯多哈特
}//函数
// -------------------------------------------------------------------          
createChart（“列”，“示例1”，200）；
createChart（“列”，“示例2”，250）；
createChart（“列”，“示例3”，300）；
createChart（“列”，“示例4”，100）；
createChart（“饼图”、“示例5”、450）；
// -----------------------------------------------------------------------
})；//$（文档）.ready（函数（））

您可以使用css

float:left

和

width:20%

（也可以从图表中删除宽度设置，让它填充div）：


.肩并肩{
宽度：20%；
浮动：左；
}

更新

你能从浏览器（查看源代码）和相关CSS发布呈现的HTML吗？这将帮助我们更好地帮助你：）我使用这个：。侧边{margin:10px 20px；float:left；}

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

<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;
}