Здравствуйте, уважаемые.
Помогите, пожалуйста, разобраться.
Написал код на HTML с вставками из библиотеки d3 на JS. Файл называется HelloWorld.html. Сама веб-страница работает корректно. С помощью d3 создаю динамичный график.
Далее пытаюсь всё это упаковать в гаджет и тут возникает проблема: в виджете отображается только текст, а график, нарисованный с помощью d3 ну никак.
Не знаю, как быть. GIMAGE Protocol попробовать может внедрить. Но разве к графику применимо сие?
File1 "HelloWorld.html"
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Тест</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
body
{
margin: 0;
width: 500px;
height: 500px;
font-family: verdana;
font-weight: bold;
font-size: 10px;
}
#gadgetContent
{
margin-top: 10px;
width: 500px;
vertical-align: middle;
text-align: center;
overflow: hidden;
}
</style>
<script src="http://d3js.org/d3.v3.min.js" charset="UTF-8"></script>
</head>
<script type="text/jscript" language="jscript">
function init()
{
var oBackground = document.getElementById("imgBackground");
oBackground.src = "url(images/background.png)";
var chart_area = d3
.select("body")
.append('div')
.classed('chart_area', true)
;
var RANDOM_MIN = 0, RANDOM_MAX = 100;
function irand(lo, up) { return Math.floor(Math.random()*(up-lo+1)+lo); }
var data = []; for (var i=0; i<10; i++) { data.push(irand(RANDOM_MIN, RANDOM_MAX)); }
chart_area.selectAll('div')
.data(data)
.enter()
.append('div')
.classed('stolbiki', true)
.style('background-color', function(d, i) { return 'hsl(1800,50%,'+ (90-d/3) + '%)'; })
.style('height',20 + 'px' )
.style('margin', '10px 20px')
.style('width', '0PX')
.transition()
.duration(1250)
.style('width', function(d,i) { return d + 'px'; } )
.text(String)
;
}
</script>
<body onload="init()">
<g:background id="imgBackground" style="position:absolute; z-index:-1; top:0; left:0;" opacity="80">
<span id="gadgetContent">Text</span>
</g:background>
</body>
<br></br>
<br></br>
</html>
File2 "gadget.xml"
|
Код:
|
<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>А</name>
<version>1.0</version>
<author name="Д">
<info url="msdn.microsoft.com" />
</author>
<copyright>© Microsoft Corporation.</copyright>
<description>Т.</description>
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="HelloWorld.html" />
<permissions>Full</permissions>
<platform minPlatformVersion="1.0" />
</host>
</hosts>
</gadget> |