如何为页面加载时加载的内容制作幻灯片?

时间:2013-10-24 08:26:52

标签: javascript jquery jquery-ui slideshow

我想制作一个幻灯片,其中包含两个Divs加载的两个信息中心。

<div id="chartContainer1"></div>
<div id="chartContainer2"></div>

我只有这两个Divs并在页面加载时我正在进行Json调用以获取一些数据然后使用Chartjs“一个Jquery插件”仪表板被填充 所以问题是如何将这两个仪表板放在幻灯片中? 这是我的页面代码

 <div id="chartContainer1"></div>
    <div id="chartContainer2"></div>
    <script type="text/javascript">
        //var dataSource = $("#chartContainer").dxChart('option', 'dataSource', {});
     $.ajax({
            type: "POST",
            url: '@Url.Action("StatesChart", "Home")',
            dataType: "html",
            success: function (data) {
                var array = JSON.parse(data);
                $("#chartContainer1").dxPieChart({
                    dataSource: array,
                    title: "",
                    tooltip: {
                        enabled: true,
                        format: "decimal",
                        percentPrecision: 2,
                        //the text that will be shown on hober on any part of the pie
                        customizeText: function() {
                            return this.valueText + " - " + this.percentText;
                        }
                    },
                    //right details
                    legend: {
                        horizontalAlignment: "right",
                        verticalAlignment: "top",
                        margin: 4
                    },
                    series: {
                        type: "doughnut",
                        argumentField: "StateName",
                        valueField: "AllAssetsNumber",
                        label: {
                            visible: true,
                            format: "decimal",
                            connector: {
                                visible: true
                            }
                        }
                    }
                });
            },
            error: function () {
                alert('Save Failure', "error");
            }
        });

    </script>

0 个答案:

没有答案