//事例
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<script src="VMLChart.js" type="text/javascript"></script>
<script src="column.js" type="text/javascript"></script>
<script src="brokenLine.js" type="text/javascript"></script>
<script type="text/javascript">
//计算字符串长度
function strlen(str) {
var len = 0;
for (var i = 0; i < str.length; i++) {
if (str.charCodeAt(i) > 255 || str.charCodeAt(i < 0)) len += 2; else len++;
}
return len;
}
function strLEN(str) {
var i, sum = 0;
for (i = 0; i < str.length; i++) {
if ((str.charCodeAt(i) >= 0) && (str.charCodeAt(i) <= 255))
sum = sum + 1;
else
sum = sum + 2;
}
return sum;
}
var _stsetInterval = window.setInterval;
window.setInterval = function(fRef, mDelay) {
if (typeof fRef == 'function') {
var argu = Array.prototype.slice.call(arguments, 2); //截取除前两位的所有参数
var f = (function() { fRef.apply(null, argu); }); //传入除前两位的所有参数
return _stsetInterval(f, mDelay);
}
return _stsetInterval(fRef, mDelay);
}
var _stsetTimeout = window.setTimeout;
window.setTimeout = function(fRef, mDelay) {
if (typeof fRef == 'function') {
var argu = Array.prototype.slice.call(arguments, 2);
var f = (function() { fRef.apply(null, argu); });
return _stsetTimeout(f, mDelay);
}
return _stsetTimeout(fRef, mDelay);
}
</script>
<style>
v/:*
{
behavior: url(#default#VML);
}
</style>
<!--柱形图-->
<script type="text/javascript">
function drawOut() {
var values = [{ 'num': '1', 'name': '大地的荒凉123', 'value': '16', 'color': 'red' }, { 'num': '2', 'name': '参天啊123', 'value': '5', 'color': 'green' }, { 'num': '3', 'name': 'MyGod', 'value': '18', 'color': 'yellow' }, { 'num': '4', 'name': 'Happy', 'value': '17', 'color': 'blue' }, { 'num': '5', 'name': 'Kitty', 'value': '14', 'color': '#DC143C' }, { 'num': '6', 'name': '温州', 'value': '4', 'color': '#9932CC' }, { 'num': '7', 'name': '杭州', 'value': '23', 'color': '#BDB76B' }, { 'num': '8', 'value': '12', 'color': 'black'}];
var minx = 300;
var miny = 200;
var divWidth = 500;
var divHeight = 300;
win_min_xResize = 300;
win_min_yResize = 200;
win_min_xMove = 300 - 10; //减去宽度
win_min_yMove = 200 - 20;
$('divDiagramColumn').style.width = divWidth;
$('divDiagramColumn').style.height = divHeight;
$('divBrokenLinear').style.width = divWidth;
$('divBrokenLinear').style.height = divHeight;
var resizeColumn = $('divDiagramColumn').getElementsByTagName('div').item(0);
var resizeLinear = $('divBrokenLinear').getElementsByTagName('div').item(0);
resizeColumn.style.left = divWidth - parseInt(resizeColumn.style.width);
resizeColumn.style.top = divHeight - parseInt(resizeColumn.style.height);
resizeLinear.style.left = divWidth - parseInt(resizeLinear.style.width);
resizeLinear.style.top = divHeight - parseInt(resizeLinear.style.height);
_drawColumn(values, divWidth, divHeight, 'together');
_drawLinear(values, divWidth, divHeight);
resizeWindow_EventAfter.reDrawColumn = function(obj) {
$('Frame_divDiagramColumn').parentNode.removeChild($('Frame_divDiagramColumn'));
_drawColumn(values, obj.parentNode.style.width, obj.parentNode.style.height, false);
}
resizeWindow_EventAfter.reDrawLinear = function(obj) {
$('Frame_divBrokenLinear').parentNode.removeChild($('Frame_divBrokenLinear'));
_drawLinear(values, obj.parentNode.style.width, obj.parentNode.style.height);
}
}
function _drawColumn(values, width, height, isD) {
SetDefault(ChartType.Column, values, 'divDiagramColumn', false);
Frame_divDiagramColumn.width = width;
Frame_divDiagramColumn.height = height;
Column_Frame_divDiagramColumn.isTextVertical = true;
Column_Frame_divDiagramColumn.width = 10;
Column_Frame_divDiagramColumn.isDynamic = isD;
ShowDefault(ChartType.Column, values, 'divDiagramColumn', Frame_divDiagramColumn, Column_Frame_divDiagramColumn);
}
function _drawLinear(values, width, height) {
SetDefault(ChartType.Linear, values, 'divBrokenLinear', false);
Frame_divBrokenLinear.width = width;
Frame_divBrokenLinear.height = height;
ShowDefault(ChartType.Linear, values, 'divBrokenLinear', Frame_divBrokenLinear, Linear_Frame_divBrokenLinear);
}
</script>
</head>
<body οnlοad="drawOut()">
<v:oval style="position: absolute; left: 200; top: 50; width: 100; height: 80" fillcolor='green'>
<div style="writing-mode=tb-rl;">
这里是透明的</div>
</v:oval>
<div id="divDiagramColumn" style="position: absolute; left: 50; top: 20; border-width: 1px;
filter: alpha(opacity=70);">
<div style="position: absolute; width: 10px; height: 20px; background-color: Red;
cursor: move;" οnmοusedοwn="multiStartDragWindow(this,this.parentNode)" οnmοuseup="multiStopDragWindow(this)"
οnmοusemοve="multiDragWindow(this,true,this.parentNode)">
</div>
</div>
<div id="divBrokenLinear" style="position: absolute; left: 650; top: 20; border-width: 1px;
filter: alpha(opacity=70);">
<div style="position: absolute; width: 10px; height: 20px; background-color: Red;
cursor: se-resize;" οnmοusedοwn="startResizeWindow(this);multiStartDragWindow(this);"
οnmοusemοve="resizeWindow(this);multiDragWindow(this);" οnmοuseup="stopResizeWindow(this,'reDrawLinear');multiStopDragWindow(this);">
</div>
</div>
</body>
</html>
效果如下: