Диаграмма средствами VML

Boocha · October 14, 2009

Здрасте.

Есть код,

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v = "urn:schemas-microsoft-com:vml" xml:lang=en lang=en>
	<head>
 <script src="http://api.simile-widgets.org/timeplot/1.1/timeplot-api.js" 
       type="text/javascript"></script>
  <title>  WebTerminal</title>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<script language="JavaScript" type="text/javascript">
//main array for temperature
var mas_time = new Array(); var mas_temper = new Array();mas_time[0] = "11.10.2009 00:09:21";mas_temper[0] = 0.0;mas_time[1] = "11.10.2009 00:09:21";mas_temper[1] = 0.0;mas_time[2] = "11.10.2009 00:24:21";mas_temper[2] = 26.3;mas_time[3] = "11.10.2009 00:39:21";mas_temper[3] = 11.9;mas_time[4] = "11.10.2009 00:54:21";mas_temper[4] = 17.7;mas_time[5] = "11.10.2009 01:09:21";mas_temper[5] = 16.3;mas_time[6] = "11.10.2009 01:24:21";mas_temper[6] = 3.7;mas_time[7] = "11.10.2009 01:39:21";mas_temper[7] = -5.7;mas_time[8] = "11.10.2009 01:54:21";mas_temper[8] = -9.6;mas_time[9] = "11.10.2009 02:09:21";mas_temper[9] = -13.2;mas_time[10] = "11.10.2009 02:24:21";mas_temper[10] = -16.6;mas_time[11] = "11.10.2009 02:39:21";mas_temper[11] = -18.4;mas_time[12] = "11.10.2009 02:54:21";mas_temper[12] = -19.0;mas_time[13] = "11.10.2009 03:09:21";mas_temper[13] = -19.0;mas_time[14] = "11.10.2009 03:24:21";mas_temper[14] = -18.6;mas_time[15] = "11.10.2009 03:39:21";mas_temper[15] = -19.5;mas_time[16] = "11.10.2009 03:54:21";mas_temper[16] = -20.8;mas_time[17] = "11.10.2009 04:09:21";mas_temper[17] = -21.7;mas_time[18] = "11.10.2009 04:24:21";mas_temper[18] = -21.7;mas_time[19] = "11.10.2009 04:39:21";mas_temper[19] = -21.4;mas_time[20] = "11.10.2009 04:54:21";mas_temper[20] = -20.9;mas_time[21] = "11.10.2009 05:09:21";mas_temper[21] = -19.8;mas_time[22] = "11.10.2009 ;var mint = -28.1;var maxt = 26.3;
//————————--
function draw()
{

//count region on the datum, where draw "x0" line
  if(countX < 13)
    countX = 13;
  var scaleX = document.body.clientWidth - 60;
  var weightX = scaleX/countX;
  var zeroX = 30;
  //******************************************
  var scaleY = document.body.clientHeight - 60;
  if(mint > -0.5)
  {
    var countY = 1.2*maxt;
    if(countY < 15)
    {
      maxt = 15/1.1;//for nice form
      countY = 15;
    }
    var weightY = scaleY/countY;
    var zeroY = scaleY-10;
  }
  else
  {
    if(maxt > 0.5)
    {
      var countY = 1.2*(maxt - mint);
      if(countY < 15)
      {
        maxt = (maxt/countY)*15*1.1;//для красоты
        mint = (mint/countY)*15*1.1;
        countY = 15;
      }    
      var weightY = scaleY/countY;
      //+mint*weightY because mint is negative value
      var zeroY = scaleY+mint*weightY-10;
    }
    else
    {
      var countY = -1.2*mint;
      if(countY < 15)
      {
        maxt = 0; 
        mint = -15/1.1;
        countY = 15;
      }    
      var weightY = scaleY/countY;
      //+mint*weightY because mint is negative value
      var zeroY = scaleY+mint*weightY-10;  
    }
  }
  var x = 0;
  var y = 0;
  var pix = "";
/*
  pix = "<v:line style=\"position:absolute;left:100px;top:100px\""+
           "strokecolor=\"red\" strokeweight=\"2px\" from=\"0 0\" to=\"100 0\"/>";
  document.write(pix);
*/

  //————————--draw datum lines——————————————-
  for(var i=0;i<scaleY+15;i++)
  {
    x = zeroX;
    y = 25+scaleY-i;
    pix = "<div style=\"position:absolute;top:"+y+"px;left:"+x+"px;font-size:15pt;\">|</div>";
    document.write(pix);
  }
  for(var i=0;i<scaleX+20;i++)
  {
    x = 10+i;
    y = Math.floor(zeroY);
    pix = "<div style=\"position:absolute;top:"+y+"px;left:"+x+"px;font-size:15pt;\">-</div>";
    document.write(pix);
  }
  //————————--write datum values——————————————-
  if(mint > -1)
  {
    for(var i=0;i<Math.floor(1.1*maxt);i+=Math.floor(countY/7))
    {
      y = Math.floor(zeroY-weightY*i);
      pix = "<div style=\"position:absolute;top:"+y+"px;left:5px;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;\">"+i+"</div>";
      document.write(pix);
      pix = "<div style=\"position:absolute;top:"+y+"px;left:30px;font-size:15pt;\">-</div>";
      document.write(pix);
    }
  }
  else
  {
    for(var i=Math.floor(1.1*mint);i<Math.floor(1.1*maxt);i+=Math.floor(countY/7))
    {
      y = Math.floor(zeroY-weightY*i);
      pix = "<div style=\"position:absolute;top:"+y+"px;left:5px;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;\">"+i+"</div>";
      document.write(pix);
      pix = "<div style=\"position:absolute;top:"+y+"px;left:30px;font-size:15pt;\">-</div>";
      document.write(pix);
    }
  }
  for(var i=Math.floor(countX/6.2);i<countX;i+=Math.floor(countX/6.2))
  {
    x = Math.floor(zeroX+weightX*i-105);
    y = Math.floor(zeroY+25);
    if(mas_time[i])
    {
      pix = "<div style=\"position:absolute;top:"+y+"px;left:"+x+"px;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;\">"+mas_time[i]+"</div>";
      document.write(pix);
    }
    x = Math.floor(zeroX+weightX*i);
    y = Math.floor(zeroY);
    pix = "<div style=\"position:absolute;top:"+y+"px;left:"+x+"px;font-size:15pt;\">|</div>";
    document.write(pix);
  }
  //————————--write time prefix———-
    x = Math.floor(scaleX/2)-15;
    y = Math.floor(zeroY+40);
    pix = "<div style=\"position:absolute;top:"+y+"px;left:"+x+"px;font-size:9px; font-weight: bold; color:#000000;font-family: Verdana, Arial, Helvetica, sans-serif;cursor:hand;\">"+"</div>";
    document.write(pix);
  //————————--draw diagram———————————————
  for(var i=0;i<countX;i++)
  {
    if(mas_time[i])
    {
      x = Math.floor(zeroX+weightX*i);
      y = Math.floor(zeroY-weightY*mas_temper[i]);
      pix = "<div title=\""+mas_time[i]+" / "+mas_temper[i]+"'C\" style=\"position:absolute;top:"+y+"px;left:"+x+"px;font-size:15pt;color:#FF0000;cursor:hand;\">•</div>";
      document.write(pix);
    }
  }
  //—————————————————--
  document.bgColor ="#DDDDDD";
  document.title ="Temperature history for";
}
</script>
<style type="text/css">
  v\:* {behavior:url(#default#VML);}
</style>
<style type="text/css">
  DIV {font-family: Verdana, Arial, Helvetica, sans-serif;}
</style>

<body onload="draw()">

</body>
</html>

		</body></html>

Ни как не могу подсунуть <v:polyline что бы он у меня по координатам рисовал диаграмму

Есть у кого идеи?

Edited October 14, 2009 by s0rr0w

s0rr0w · October 14, 2009

Возьмите готовый скрипт рисования диаграм и не насилуйте нам мозг.

Great Rash · October 14, 2009

Не совсем понятно чего надо. По каким координатам рисоваться линия должна? Да и вообще это скорее в скрипты.

В любом случае я бы порекомендовал юзать SVG в связке с библиотекой excanvas.js для кроссбраузерности, а то юзеры не ИЕ нифига не увидят.

Sign In

Диаграмма средствами VML

Question

Boocha

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

s0rr0w

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information