如何通过拖放将图表显示到gridsterJs中

本文介绍了如何通过拖放将图表显示到gridsterJs中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

请帮帮我，我有一个项目仪表板小工具使用拖放。我已离开（小部件列表）和右侧（小部件区域）。左侧的小部件是可拖动的，可放入小部件区域。

当小部件示例：人员列表（只是标题）被拖放到小部件区域时，它显示datagrid中的名称列表。我设法做到这一点。

然而，我的问题是在图表上，它没有显示任何东西，但它克隆了图表正在使用的div。请帮助我们，任何信息将不胜感激。 btw即时通讯使用jqx获取图表

这是我的代码，为您提供信息：

Please help me, i have a project dashboard widgets using drag and drop. I have left(widgets lists) and right(widgets area). widgets on left are draggable and droppable into widgets area.

When the widgets example:staff list(just a title) is dragged and dropped on the widgets area it shows the list of name in datagrid. I manage to do that.

However, my problem is on the charts, it doesn't show anything but it cloned the div that the chart is using. Please help me guys, any information will be appreciated. btw im using jqx for chart

Here's my code to give you information:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Eto Na</title>
  <script type="text/javascript" src="jquery-1.11.1.min.js"></script>

  <script src="jquery.gridster.js" type="text/javascript" charset="utf-8"></script>
  <script src="jquery-ui.js" type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" type="text/css" href="jquery.gridster.css">
  <script type="text/javascript" src="dragNdrop.js"></script>
	<!--Datable Tables-->
    <script type="text/javascript" language="javascript" src="dtjs/data-tables.js"></script>
	<script type="text/javascript" language="javascript" src="dtjs/jquery.dataTables.js"></script>
 	<link rel="stylesheet" type="text/css" href="dtcss/jquery.dataTables.css">
	<link rel="stylesheet" type="text/css" href="dtcss/demo.css">
     <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {

            // prepare chart data
            var sampleData = [
                { Country: 'China', Population: 1347350000, Percent: 19.18},
                { Country: 'India', Population: 1210193422, Percent: 17.22},
                { Country: 'USA', Population: 313912000, Percent: 4.47},
                { Country: 'Indonesia', Population: 237641326, Percent: 3.38},
                { Country: 'Brazil', Population: 192376496, Percent: 2.74}];

            // prepare jqxChart settings
            var settings = {
                title: "Top 5 most populated countries",
                description: "Statistics for 2011",
                showLegend: true,
                enableAnimations: true,
                padding: { left: 20, top: 5, right: 20, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                xAxis:
                    {
                        dataField: 'Country',
                        showGridLines: true,
                        flip: false
                    },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'column',
                            orientation: 'horizontal',
                            columnsGapPercent: 100,
                            toolTipFormatSettings: { thousandsSeparator: ',' },
                            valueAxis:
                            {
                                flip: true,
                                unitInterval: 100000000,
                                maxValue: 1500000000,
                                displayValueAxis: true,
                                description: '',
                                formatFunction: function (value) {
                                    return parseInt(value / 1000000);
                                }
                            },
                            series: [
                                    { dataField: 'Population', displayText: 'Population (millions)' }
                                ]
                        }
                    ]
            };

            // setup the chart
            $('#chartContainer').jqxChart(settings);
        });
    </script>
<style>
.overlay_fix {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    opacity: 0;
    display: none;
}
</style>

</head>
<body>

<h1>Resize</h1>
<p>http://jsfiddle.net/cnb8eL9a/</p>
<p>http://www.codeproject.com/Articles/24123/Drag-and-Drop-with-Persistence-using-JQuery</p>

<div id="widget-list">
	<ul>

	<li class="sglwidgets" data-row="6" data-col="6" data-sizex="2" data-sizey="2">

        <p class="title">Bar</p>

        <div class="big">
            <p class="content">
                <iframe src="bakaeto.htm" style="width:100%; height:290px;">
                  <p>Your browser does not support iframes.</p>
                </iframe>
            </p>
        </div>
         <div class="overlay_fix"> </div>
    </li>

    <li class="sglwidgets " data-row="6" data-col="6" data-sizex="2" data-sizey="2">
        <p class="title">Staff List</p>
        <div class="small">
            <p class="content">
                <ul>
                    <li>Suzie Billips</li>
                    <li>Sherri Tworek</li>
                    <li>Larue Gaspard</li>
                    <li>Debroah Nestle</li>
                    <li>Lillian Langston</li>
                    <li>Delphine Keach</li>
                    <li>Mirta Laver</li>
                    <li>Drucilla Ve	nema</li>
                </ul>
            </p>
        </div>

    </li>
    <li class="sglwidgets" data-row="6" data-col="6" data-sizex="2" data-sizey="2">
        <p class="title">Staff Info</p>
      <div class="big">
          <p class="content">
            <div id="demo"></div>
          </p>

	</div>
    </li>
    </ul>
</div>

<div class="gridster" id="widgets-area">
	<ul>
       </ul>
</div>


</body>
</html>

widgets

如何通过拖放将图表显示到gridsterJs中

问题描述

推荐答案