Javascript JqxChart给出错误：无效的负值，用于<；rect>；属性高度="-1“；

我使用JqxPanel、JqxDocking和JqxChart

JqxPanel由工作正常的对接窗口组成。当我习惯于将JqxChart放入窗口时，Chrome给出错误：标签处属性height=“-1”（重绘2次）的负值无效

请有人能在这方面帮助我

JavaScript DeviceChart.js

var DevicesgenerateData = function () {
            var devicedata = new Array();
            var deviceNames =
            [
            "Working", "GPS Antenna","Power Removed","SIM Problem","Servicing","Damaged"
            ];
            var deviceNos =
            [
            10,10,30,10,20,20
            ];

            for (var i = 0; i < 6; i++) {
                var devicerow = {};

                devicerow["devicenames"] = deviceNames[i];
                devicerow["devicenos"] = deviceNos[i];
                devicedata[i] = devicerow;
            }
            return devicedata;
             }

       var devicesource =
        {
            localdata: DevicesgenerateData(),
                datafields: [
                { name: 'devicenames' },
                { name: 'devicenos' }
            ], 
            datatype: "array"

        };


        var ddataAdapter = new $.jqx.dataAdapter(devicesource);
            //, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
            //$('#jqxChart').jqxChart({borderColor: 'Blue'});

        // prepare jqxChart settings
        var devicesettings = {
            //title: "Mobile browsers share in Dec 2011",
           // description: "(source: wikipedia.org)",
            enableAnimations: true,
                borderColor: 'Red',
            showLegend: true,
            legendLayout: { left: 210, top: 50, width: 100, height: 200, flow: 'vertical' },
            padding: { left: 5, top: 5, right: 5, bottom: 5 },
            titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
            source: ddataAdapter,
            colorScheme: 'scheme02',
            seriesGroups:
                [
                    {
                        type: 'pie',
                        showLabels: true,
                        series:
                            [
                                { 
                                    dataField: 'devicenos',
                                    displayText: 'devicenames',
                                    labelRadius: 70,
                                    initialAngle: 15,
                                    radius: 95,
                                    centerOffset: 0,
                                    formatSettings: { sufix: '%', decimalPlaces: 1 }
                                }
                            ]
                    }
                ]
        };



         <link rel="stylesheet" href="css/jqx.base.css" type="text/css" />

        <script type="text/javascript" src="js/gettheme.js"></script>
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js/jqxcore.js"></script>
        <script type="text/javascript" src="js/jqxscrollbar.js"></script>
        <script type="text/javascript" src="js/jqxbuttons.js"></script>
        <script type="text/javascript" src="js/jqxpanel.js"></script>
        <script type="text/javascript" src="js/jqxwindow.js"></script>
       <script type="text/javascript" src="js/jquery.global.js"></script>
        <script type="text/javascript" src="js/jqxdocking.js"></script>
        <script type="text/javascript" src="js/jqxsplitter.js"></script>

        <script type="text/javascript" src="js/jqxchart.js"></script>
        <script type="text/javascript" src="js/jqxdata.js"></script>

         <script type="text/javascript" src="js/deviceschart.js"></script>




        <script type="text/javascript">
            $(document).ready(function () {
                // Create jqxPanel
                var theme = getTheme();
                $("#panel").jqxPanel({ width: "100%", height: 350, theme: theme });


                $('#maindocking').jqxDocking({ theme: theme, orientation: 'horizontal', width: 990, mode: 'docked' });
                $('#maindocking').jqxDocking('disableWindowResize', 'window1');
                $('#maindocking').jqxDocking('disableWindowResize', 'window2');
                $('#maindocking').jqxDocking('disableWindowResize', 'window3');
                $('#maindocking').jqxDocking('disableWindowResize', 'window4');
                $('#maindocking').jqxDocking('disableWindowResize', 'window5');
                $('#maindocking').jqxDocking('disableWindowResize', 'window6');
        $('#jqxChart').jqxChart(devicesettings);

            });
        </script>
    </head>


    <body class='default'>
        <div id='panel' style=" font-size: 13px; font-family: Verdana;">

          <div id="maindocking">
            <div id="column1docking">
                <div id="window1" style="height: 200px;">
                   <div>Vehicle Information</div>
                        <div style="overflow: hidden;">
                            <div id="jqxChart"></div>   
                        </div>

                </div><!-- window1--->
                  <div id="window2" style="height: 200px;">
                   <div>Vehicle Information</div>
                        <div style="overflow: hidden;">

                        </div>

                </div><!-- window2--->

             </div><!-- Column1 Docking-->

             <div id="column2docking">
                <div id="window3" style="height: 200px;">
                   <div>Vehicle Information</div>
                        <div style="overflow: hidden;">

                        </div>

                </div><!-- window3--->
                  <div id="window4" style="height: 200px;">
                   <div>Vehicle Information</div>
                        <div style="overflow: hidden;">

                        </div>

                </div><!-- window4--->

             </div><!-- Column2 Docking-->

           <div id="column3docking">
                <div id="window5" style="height: 200px;">
                   <div>Vehicle Information</div>
                        <div style="overflow: hidden;">

                        </div>

                </div><!-- window5--->
                  <div id="window6" style="height: 200px;">
                   <div>Vehicle Information</div>
                        <div style="overflow: hidden;">

                        </div>

                </div><!-- window6--->

             </div><!-- Column3 Docking-->


          </div> <!-- MainDocking -->
        </div> <!-- Panel -->
        </body>

var DevicesgenerateData=函数（）{
var devicedata=新数组（）；
var设备名称=
[
“正在工作”、“GPS天线”、“电源已断开”、“SIM卡问题”、“维修”、“损坏”
];
德维塞诺斯变种=
[
10,10,30,10,20,20
];
对于（变量i=0；i<6；i++）{
var devicerow={}；
devicerow[“devicenames”]=devicenames[i]；
devicerow[“devicenos”]=devicenos[i]；
devicedata[i]=设备流；
}
返回设备数据；
}
var设备源=
{
localdata:DeviceGenerateData（），
数据字段：[
{name:'devicenames'}，
{name:'devicenos'}
], 
数据类型：“数组”
};
var ddataAdapter=new$.jqx.dataAdapter（devicesource）；
//，{async:false，autoBind:true，loadError:function（xhr，status，error）{alert（'error loading“'+source.url+'”：'+error）；}）；
//$（'jqxChart'）.jqxChart（{borderColor:'Blue'}）；
//准备jqxChart设置
var设备设置={
//标题：“2011年12月手机浏览器份额”，
//说明：“（来源：wikipedia.org）”，
启用说明：正确，
边框颜色：“红色”，
传奇：没错，
legendLayout:{left:210，top:50，width:100，height:200，flow:'vertical'}，
填充：{左：5，上：5，右：5，下：5}，
标题添加：{左：0，上：0，右：0，下：10}，
资料来源：ddataAdapter，
配色方案：“scheme02”，
系列组：
[
{
键入“pie”，
showLabels：没错，
系列：
[
{ 
数据字段：“devicenos”，
displayText:'devicenames'，
标签半径：70，
初始角度：15，
半径：95，
中心偏移量：0，
格式设置：{sufix:'%1'，小数位数：1}
}
]
}
]
};
$（文档）.ready（函数（）{
//创建jqxPanel
var theme=getTheme（）；
$（“#面板”）.jqxPanel（{宽度：“100%”，高度：350，主题：主题}）；
$（'#maindocking'）.jqxDocking（{主题：主题，方向：“水平”，宽度：990，模式：“停靠”）；
$（'#maindocking'）.jqxDocking（'disableWindowResize'，'window1'）；
$（'#maindocking'）.jqxDocking（'disableWindowResize'，'window2'）；
$（'#maindocking'）.jqxDocking（'disableWindowResize'，'window3'）；
$（'#maindocking'）.jqxDocking（'disableWindowResize'，'window4'）；
$（'#maindocking'）.jqxDocking（'disableWindowResize'，'window5'）；
$（'#maindocking'）.jqxDocking（'disableWindowResize'，'window6'）；
$（'jqxChart'）.jqxChart（设备设置）；
});
车辆信息
车辆信息
车辆信息
车辆信息
车辆信息
车辆信息

我也遇到了同样的问题，我通过将包含div的宽度设置为足够大，以便在指定的设置下包含图表，从而解决了这个问题

<div id="jqxChart" style="width:680px; height:400px; vertical-align: top;  display: inline-block; padding: 10px;">

---

希望这对您有所帮助。Anon，谢谢您提供的解决方案。我也有同样的问题，但使用“Raphael”框架（Raphael-2.1.0.js）绘制图表时出现了与OP相同的错误消息。删除父元素的最大宽度（css）解决了我的问题

---

（这是作为解决方案发布的，因为向Anon的解决方案添加注释需要50个信誉。）

对我来说，事实证明是这样的，因为我将图表嵌入了一个选项卡div中，而该选项卡div在页面加载时不可见。当我将其移动到页面加载时可见的选项卡时，它会工作。

因此，我收到此错误，因为提供的数据与

系列组中的
系列不完全匹配。有些数据定义不正确，所以当我第一次尝试绘制图表时，他们的代码不喜欢缺少的数据，并且出现了一些错误

此外，我想尝试使用新的数据和新的数据更新我的图表
        if (chartTableArea.jqxChart("isInitialized") === true) {
            if (gSettings === undefined || gSettings.title === undefined) {
                gSettings = getSettings(); //sets up the gSettings
            }
            chartTableArea.jqxChart({ seriesGroups: gSettings.seriesGroups });
            chartTableArea.jqxChart(gSettings);
        } else {
            //not initialized
            chartTableArea.jqxChart(getSettings());
        }