Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.04.2018, 01:01
Новичок на форуме
Отправить личное сообщение для dimdim1791 Посмотреть профиль Найти все сообщения от dimdim1791
 
Регистрация: 18.04.2018
Сообщений: 2

Гаджет-виджет для Windows. Содержимое HTML не полностью отображается
Здравствуйте, уважаемые.
Помогите, пожалуйста, разобраться.
Написал код на 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>
Изображения:
Тип файла: jpg raz.jpg (4.0 Кб, 1 просмотров)
Тип файла: png dva.png (2.5 Кб, 1 просмотров)
Тип файла: jpg tri.jpg (3.3 Кб, 2 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 18.04.2018, 15:40
Новичок на форуме
Отправить личное сообщение для dimdim1791 Посмотреть профиль Найти все сообщения от dimdim1791
 
Регистрация: 18.04.2018
Сообщений: 2

Перефразирую.

Во что надо упаковать код ниже, чтобы можно было просто в манифесте Gadget.xml дать ссылку на данную html страницу и она отобразилась корректно (так же, как в браузере)?

<html>
<head>
	<script src="http://d3js.org/d3.v3.min.js" charset="UTF-8"></script>
</head>

<body charset="koi8-r">

<script>
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('width', function(d,i) { return d + 'px'; } ) 	
.text(String);
</script>


</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Gadget для windows xrix Элементы интерфейса 4 09.06.2014 08:41
Не отображается содержимое последующих вкладок APdesign Общие вопросы Javascript 4 17.07.2013 09:54
Социальный замок для ВКОНТАКТЕ (HTML) serg13 Работа 0 22.02.2013 16:27
Гаджет для Windows 7 + xml (ajax на локальном копьютере) deeman313 AJAX и COMET 4 05.01.2012 21:32
Гаджет для Windows 7 alesvyat Общие вопросы Javascript 1 11.04.2011 19:42