WebRoot/FusionChartsFree/Contents/resizing.html

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FusionCharts Free Documentation</title>
<link rel="stylesheet" href="Style.css" type="text/css" />
</head>

<body>
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
  <tr> 
    <td><h2 class="pageHeader">Resizing  a Chart</h2></td>
  </tr>
  <tr>
    <td valign="top" class="text"><table cellspacing="0" cellpadding="0" class="">
      <tr>
        <td class="text"><p>Often in our web pages, for various reasons we need   to either increase or decrease the size of the chart. Here, we'll see how to   resize a chart.</p>
            <p>We'll take our previous Column (Monthly sales summary) Chart example and see   how it can be resized.</p></td>
      </tr>
      <tr>
        <td class="text">&nbsp;</td>
      </tr>
      <tr>
        <td class="header">Using HTML Embedding method </td>
      </tr>
      <tr>
        <td class="text">To resize a chart, all we need to do is change a few parameters   in the HTML code which embeds the chart. Like, if we had to change the column   chart size to 400x250 pixels, we would use the following HTML code:</td>
      </tr>
    </table>    </td>
  </tr>
  <tr> 
    <td valign="top" class="text"><p>&nbsp;</p></td>
  </tr>
  <tr> 
    <td valign="top" class="codeBlock">&lt;html&gt;<br />
      ... <br /> 
      <strong>&nbsp;&nbsp;</strong>&lt;OBJECT classid=&quot;clsid:D27CDB6E-AE6D-11cf-96B8-444553540000&quot; codebase=&quot;http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0&quot; <strong>width=&quot;400&quot; height=&quot;250&quot;</strong> id=&quot;Column3D&quot; &gt;<br />
      &nbsp;&nbsp; &lt;param name=&quot;movie&quot; value=&quot;../FusionCharts/FCF_Column3D.swf&quot; /&gt;<br />
      &nbsp;&nbsp; &lt;param name=&quot;FlashVars&quot; value=&quot;&amp;dataURL=Data.xml<strong>&amp;chartWidth=400&amp;chartHeight=250</strong>&quot;&gt;<br />
      &nbsp;&nbsp; &lt;param name=&quot;quality&quot; value=&quot;high&quot; /&gt;<br /> 
     &nbsp;&nbsp; &lt;embed src=&quot;../FusionCharts/FCF_Column3D.swf&quot;  quality=&quot;high&quot; name=&quot;Column3D&quot;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; flashVars=&quot;&amp;dataURL=Data.xml<strong>&amp;chartWidth=400&amp;chartHeight=250</strong>&quot;<strong> width=&quot;400&quot; height=&quot;250&quot;</strong>type=&quot;application/x-shockwave-flash&quot; pluginspage=&quot;http://www.macromedia.com/go/getflashplayer&quot; /&gt;<br />
      &lt;/object&gt;<br />
      ... <br /> &lt;/html&gt;</td>
  </tr>
  <tr>
    <td valign="top" class="text"><p>All in all, we need to change the width and height at 4 places:</p>
      <ol>
        <li>In the width and height properties of the<span class="codetext"> &lt;OBJECT&gt;</span> Tag </li>
        <li>In the width and height properties of the <span class="codetext">&lt;EMBED&gt;</span> Tag </li>
        <li>We also introduce two new parameters under the FlashVars parameter of <span class="codetext">OBJECT</span> Tag- <span class="codeInline">chartWidth</span> and <span class="codeInline">chartHeight</span>. </li>
        <li>The above two parameters also get introduced in the <span class="codeInline">FlashVars</span> parameter of <span class="codetext">EMBED</span> Tag.</li>
      </ol>
      <p class="highlightBlock">In HTML Embedding method it is mandatory to provide the new parameters <span class="codeInline">chartWidth</span> and <span class="codeInline">chartHeight</span> else the chart will not be resized - only the container will. </p>
      <p> Here we change the size to 400x250 pixels and get the chart (shown below) with smaller dimension : </p></td>
  </tr>
  <tr>
    <td valign="top" class="text"><img src="Images/resize1.jpg"  class="imageBorder"/></td>
  </tr>
  <tr>
    <td valign="top" class="text">&nbsp;</td>