Question

我制作了一个示例html文件，在sDashBoard中包含了高图饼图。我为程序创建了窗口小部件定义。饼图正在呈现正常但小部件框太小而无法容纳图形。我的代码如下：

<html>
    <head>
        <title>PIE PLOT</title>
        <link type="text/css" href="jquery-ui.css" rel="stylesheet" />
        <link href="sDashboard.css" rel="stylesheet">
        <script src="jquery-1.8.2.js" type="text/javascript"></script> 
        <script src="jquery-ui.js" type="text/javascript"></script>
        <script src="flotr2.js" type="text/javascript"></script>
        <script src="jquery-sDashboard.js" type="text/javascript"></script>
        <script src="highcharts.js" type="text/javascript"></script>
    </head>
    <body>
        <fieldset >
            <legend>Pie chart using High chart</legend>
            <div id="container"></div>
            <div id="myDashboard" ></div>           
        </fieldset>
         <script type="text/javascript">                  

                    $(function () {
                    $('#container').highcharts({
                    chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                    },
                    title: {
                    text: 'Browser market shares at a specific website, 2010'
                    },
                    tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    plotOptions: {
                    pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                    }
                    }
                    },
                    series: [{
                    type: 'pie',
                    name: 'Browser share',
                    data: [
                    ['Firefox',   45.0],
                    ['IE',       26.8],
                    {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                    },
                    ['Safari',    8.5],
                    ['Opera',     6.2],
                    ['Others',   0.7]
                    ]
                    }]
                    });
                    });                        
                    var widgetDefinition = [{
                            widgetTitle:"MERO",
                            widgetId : "pie1",
                            widgetContent : $("#container")
                    }
                    ]
                    $("#myDashboard").sDashboard({
                        dashboardData : widgetDefinition
                    });                 

        </script>
    </body>        
</html>

我得到了绘图的输出，但是小部件框很小以容纳图形。如何增加sDashboard创建的widgetBox的大小？我也尝试在我的脚本中插入下面的代码，但它只增加了widgetBox中的数字是maxisimized

  $("#myDashboard").bind("sdashboardcreationcomplete", function(e) {

                                    $('#container').height(500);
                                    $('#container').width(500);                      
                                });

Answer 1

我找到了问题的解决方案。我真傻，不要先找到它。我编辑了html文件中包含的 sDashboard.css 。编辑是在 .sDashboard li 中的宽度上进行的。以下是我在 sDashboard.css ：

中完成的编辑

.sDashboard li {
    margin: 3px 3px 3px 0;
    padding: 1px;
    float: left;
    width: 550px;
    height: auto;
}

增加widget框sDashboard的长度

1 个答案: