Увеличение длины виджетов в sDashboard

Question

Увеличение длины виджетов в sDashboard

0

Я сделал образец html файла, чтобы включить графику highchart pie в 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>

Я получаю вывод графика, но окно виджета мало, чтобы удерживать фигуру. Как я могу увеличить размер widgetBox, созданный sDashboard? Я также попытался вставить код ниже в мой скрипт, но он только увеличивает число в widgetBox, максимизируется

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

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

Pant 01 янв. 2014, в 08:02

Источник

Теги:

javascript

html

highcharts

1 ответ

Ещё вопросы

Pant · Accepted Answer · 2014-01-01T04-12-00.000Z

Я нашел решение проблемы. Так глупо от меня не найти его на первом месте. Я редактировал /sDashboard.css, включенный в html файл. Редактирование было сделано по ширине в .sDashboard li. Следующим было редактирование, сделанное мной в /sDashboard.css:

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