jQuery MiniUI

标题: YUI 2的图表会盖住菜单的显示 [打印本页]

作者: shmily4666 时间: 2017-8-10 22:03:38 标题: YUI 2的图表会盖住菜单的显示

为何YUI 2的图表会盖住miniui的MenuBar菜单的显示？

作者: dforce 时间: 2017-8-11 10:43:02

[attach]9695[/attach]
本地测试了一下是没有你说的问题，请提供一下简单的示例来重现问题。

作者: shmily4666 时间: 2017-8-11 23:11:20

本帖最后由 shmily4666 于 2017-8-13 11:46 编辑

  代码:
YUIChart.html

<div class="mini-splitter" vertical="true" style="width:800px;height:600px;">
      <div size="30" maxSize="30" >
            <ul id="menu1" class="mini-menubar" style="width:100%;" url="listMenu.txt" idField="id" parentField="pid"></ul>
      </div>
      <div showCollapseButton="true">
         
         <div class="mini-fit" style="padding-top:5px;">
            <div id="mainTabs" class="mini-tabs" activeIndex="0" style="width:100%;height:100%;" bodyStyle="padding:0px;"
                  plain="false"  >
                     <div title="YUIChart" url="YUIChartView.html" ></div>
            </div>
         </div>
      </div>
</div>

YUIChartView.html

<head>
<title>jQuery MiniUI</title>
</head>
<body>
      <div id="chartContainer" style="width:100%;height:100%;"></div>
</body>
</html>

<script src="YUI2/yahoo-dom-event.js" type="text/javascript"></script>
<script src="YUI2/element-min.js" type="text/javascript"></script>
<script src="YUI2/charts-min.js" type="text/javascript"></script>
<script src="YUI2/datasource-min.js" type="text/javascript"></script>
<script src="YUI2/json.js" type="text/javascript"></script>
<script src="YUI2/swf/swf-min.js" type="text/javascript"></script>

<script type="text/javascript" >

      mini.parse();

      var chartContainerId = "chartContainer";

      buildChart();

//----------------------------------------------
      function buildChart() {
         YAHOO.widget.Chart.SWFURL = "YUI2/swf/charts.swf";
         YAHOO.namespace("Test");
         YAHOO.Test.data = [
                  { month: "January", rent: 1350.00, utilities: 941.68 },
                  { month: "February", rent: 1350.00, utilities: 901.35 },
                  { month: "March", rent: 1350.00, utilities: 789.32 },
                  { month: "April", rent: 1350.00, utilities: 684.71 },
                  { month: "May", rent: 1500.00, utilities: 779.811 },
                  { month: "June", rent: 1500.00, utilities: 897.95 },
                  { month: "July", rent: 1500.00, utilities: 919.811 },
                  { month: "August", rent: 1500.00, utilities: 937.95 },
                  { month: "September", rent: 1500.00, utilities: 779.811 },
                  { month: "October", rent: 1500.00, utilities: 697.95 },
                  { month: "November", rent: 1500.00, utilities: 679.811 },
                  { month: "December", rent: 1500.00, utilities: 897.95 }
         ];
         var DataSource = new YAHOO.util.DataSource(YAHOO.Test.data);
         DataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
         DataSource.responseSchema = {
            fields: ["month", "rent", "utilities"]
         };

         var seriesDef = [
            {
                  displayName: "Rent",
                  yField: "rent",
                  style: { size: 10 }
            },
                  {
                     displayName: "Utilities",
                     yField: "utilities",
                     style: { size: 10 }
                  }
         ];

         var currencyAxis = new YAHOO.widget.NumericAxis();
         var categoryAxis = new YAHOO.widget.CategoryAxis();
         //chartContainerId为图表DOM元素id
         var mychart = new YAHOO.widget.ColumnChart(chartContainerId, DataSource,
         {
            series: seriesDef,
            xField: "month",
            yAxis: currencyAxis,
            xAxis: categoryAxis
         });
      }

      </script>

相对来说，好似中间多一层mini-tabs控件就不行
[attach]9702[/attach]

作者: felt 时间: 2017-8-14 13:13:41

shmily4666 发表于 2017-8-11 23:11
代码:
YUIChart.html

[attach]9705[/attach]本地模拟你的环境，还是可以的。

另外这yui图表是第三方的。

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)