![](/img/trans.png)
[英]Highcharts navigator error: Invalid negative value for <rect> attribute width
[英]JqxChart Giving error Error: Invalid negative value for <rect> attribute height=“-1”
我使用的是JqxPanel,JqxDocking和JqxChart。
JqxPanel包含正常工作的Docking窗口。 當我以前把JqxChart放到窗口時Chrome給出錯誤錯誤:屬性高度的負值=“ - 1”(重復2次)在標簽處
請有人在這方面幫助我
JavaScript deviceschart.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>
我遇到了同樣的問題,我通過將包含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的錯誤信息相同。 刪除父元素的max-width(css)解決了我的問題。
(這是作為解決方案發布的,因為需要50個聲譽來向Anon的解決方案添加評論。)
對我來說,事實證明是這樣的,因為我將圖表嵌入在頁面加載時不可見的制表符div中。 當我將其移動到頁面加載時可見的選項卡時,它可以正常工作。
所以我收到了這個錯誤,因為提供的數據與我在seriesGroups
series
不完全匹配。 有些數據沒有正確定義,所以當我第一次嘗試繪制圖表時,他們的代碼不喜歡丟失的內容,並咳出了其中一些錯誤。
此外,我想嘗試使用新數據和新的seriesGroups
更新我的圖表。 在進行類似的更改時,我必須調用jqxChart
並在更改其他數據之前更新seriesGroups
。
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());
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.