📄 piechartdesigner_form.html
字号:
<head>
<style><!-- a:{color:#000099} a:vlink{color:#663366} a:hover{color:#007FFF} --></style>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#0000EE" vlink="#551A8B" alink="#FF0000">
<script LANGUAGE="JavaScript">
<!--
function repaint() {
// ALL HTML AND JAVASCRIPT CODE COPYRIGHT BY OBJECTPLANET 2000-2002
// ALL RIGHTS RESERVED, DO NOT COPY
// NOTE: do not change the sequence unless you know what you are doing
// get a reference to the input
var input = document.input;
var chart = parent.chart.document.Chart;
// don't repaint after each setParameter
chart.chart.setAutomaticRepaintOn(false);
// values
chart.setParameter("seriesCount", input.seriesCount.value);
chart.setParameter("sampleCount", input.sampleCount.value);
chart.setParameter("sampleValues_0", input.sampleValues_0.value);
chart.setParameter("sampleValues_1", input.sampleValues_1.value);
chart.setParameter("sampleValues_2", input.sampleValues_2.value);
// labels
chart.setParameter("chartTitle", input.chartTitle.value);
chart.setParameter("titleFont", input.titleFont.value);
chart.setParameter("seriesLabels", input.seriesLabels.value);
chart.setParameter("sampleLabels", input.sampleLabels.value);
chart.setParameter("seriesLabelsOn", input.seriesLabelsOn.checked + "");
chart.setParameter("seriesLabelStyle", input.seriesLabelStyle.value);
chart.setParameter("sampleLabelsOn", input.sampleLabelsOn.checked + "");
chart.setParameter("sampleLabelStyle", input.sampleLabelStyle.value);
chart.setParameter("valueLabelsOn", input.valueLabelsOn.checked + "");
chart.setParameter("valueLabelStyle", input.valueLabelStyle.value);
chart.setParameter("valueLabelPrefix", input.valueLabelPrefix.value);
chart.setParameter("valueLabelPostfix", input.valueLabelPostfix.value);
chart.setParameter("sampleDecimalCount", input.sampleDecimalCount.value);
chart.setParameter("percentLabelsOn", input.percentLabelsOn.checked + "");
chart.setParameter("percentLabelStyle", input.percentLabelStyle.value);
chart.setParameter("percentDecimalCount", input.percentDecimalCount.value);
chart.setParameter("legendOn", input.legendOn.checked + "");
chart.setParameter("legendPosition", input.legendPosition.value);
chart.setParameter("legendLabels", input.legendLabels.value);
chart.setParameter("legendFont", input.legendFont.value);
chart.setParameter("legendColors", input.legendColors.value);
chart.setParameter("pieLabelsOn", input.pieLabelsOn.checked + "");
chart.setParameter("pieLabelFont", input.pieLabelFont.value);
chart.setParameter("floatingLabelFont", input.floatingLabelFont.value);
chart.setParameter("insideLabelFont", input.insideLabelFont.value);
// style
chart.setParameter("3DModeOn", input.Mode3DOn.checked + "");
chart.setParameter("angle", input.angle.value);
chart.setParameter("depth", input.depth.value);
chart.setParameter("selectionStyle", input.selectionStyle.value);
chart.setParameter("detachedDistance", input.detachedDistance.value);
chart.setParameter("sliceSeperatorOn", input.sliceSeperatorOn.checked + "");
chart.setParameter("sliceSeperatorColor", input.sliceSeperatorColor.value);
// colors
chart.setParameter("sampleColors", input.sampleColors.value);
chart.setParameter("background", input.background.value);
chart.setParameter("foreground", input.foreground.value);
// repaint the chart
chart.chart.repaint();
// construct the applet code
appletcode = "<applet code=com.objectplanet.chart.PieChartApplet\n";
appletcode += "width=400 height=250 archive=chart.jar>\n";
// values
appletcode += GetCode("seriesCount", input.seriesCount.value);
appletcode += GetCode("sampleCount", input.sampleCount.value);
appletcode += GetCode("sampleValues_0", input.sampleValues_0.value);
appletcode += GetCode("sampleValues_1", input.sampleValues_1.value);
appletcode += GetCode("sampleValues_2", input.sampleValues_2.value);
// labels
appletcode += GetCode("chartTitle", input.chartTitle.value);
appletcode += GetCode("titleFont", input.titleFont.value);
appletcode += GetCode("seriesLabels", input.seriesLabels.value);
appletcode += GetCode("sampleLabels", input.sampleLabels.value);
appletcode += GetBoolCode("seriesLabelsOn", input.seriesLabelsOn.checked);
appletcode += GetCode("seriesLabelStyle", input.seriesLabelStyle.value);
appletcode += GetBoolCode("sampleLabelsOn", input.sampleLabelsOn.checked);
appletcode += GetCode("sampleLabelStyle", input.sampleLabelStyle.value);
appletcode += GetBoolCode("valueLabelsOn", input.valueLabelsOn.checked);
appletcode += GetCode("valueLabelStyle", input.valueLabelStyle.value);
appletcode += GetCode("valueLabelPrefix", input.valueLabelPrefix.value);
appletcode += GetCode("valueLabelPostfix", input.valueLabelPostfix.value);
appletcode += GetCode("sampleDecimalCount", input.sampleDecimalCount.value);
appletcode += GetBoolCode("percentLabelsOn", input.percentLabelsOn.checked);
appletcode += GetCode("percentLabelStyle", input.percentLabelStyle.value);
appletcode += GetCode("percentDecimalCount", input.percentDecimalCount.value);
appletcode += GetBoolCode("legendOn", input.legendOn.checked);
appletcode += GetCode("legendPosition", input.legendPosition.value);
appletcode += GetCode("legendLabels", input.legendLabels.value);
appletcode += GetCode("legendFont", input.legendFont.value);
appletcode += GetCode("legendColors", input.legendColors.value);
appletcode += GetBoolCode("pieLabelsOn", input.pieLabelsOn.checked);
appletcode += GetCode("pieLabelFont", input.pieLabelFont.value);
appletcode += GetCode("floatingLabelFont", input.floatingLabelFont.value);
appletcode += GetCode("insideLabelFont", input.insideLabelFont.value);
// style
appletcode += GetBoolCode("3DModeOn", input.Mode3DOn.checked);
appletcode += GetCode("angle", input.angle.value);
appletcode += GetCode("depth", input.depth.value);
appletcode += GetCode("selectionStyle", input.selectionStyle.value);
appletcode += GetCode("detachedDistance", input.detachedDistance.value);
appletcode += GetBoolCode("sliceSeperatorOn", input.sliceSeperatorOn.checked);
appletcode += GetCode("sliceSeperatorColor", input.sliceSeperatorColor.value);
// colors
appletcode += GetCode("sampleColors", input.sampleColors.value);
appletcode += GetCode("background", input.background.value);
appletcode += GetCode("foreground", input.foreground.value);
appletcode += "</applet>";
parent.chart.output.appletcode.value = appletcode;
}
function GetCode(name, value) {
if (value != null && value.length > 0) {
return "<param name=" + name + " value=\"" + value + "\">\n";
}
return "";
}
function GetBoolCode(name, checked) {
if (checked == true) {
return "<param name=" + name + " value=" + checked + ">\n";
}
return "";
}
function complex() {
parent.chart.Chart.chart.setAutomaticRepaintOn(false);
parent.chart.Chart.setParameter("sampleCount", "2");
var input = document.input;
input.seriesCount.value = "3";
input.sampleCount.value = "";
input.sampleValues_0.value = "200, 300";
input.sampleValues_1.value = "300, 400";
input.sampleValues_2.value = "160, 150";
input.chartTitle.value = "Software Sales";
input.titleFont.value = "Courier, bold, 20";
input.seriesLabels.value = "Europe\\n,America\\n,Asia\\n";
input.sampleLabels.value = "Client Components\\n,Server Components\\n";
input.seriesLabelsOn.checked = true;
input.seriesLabelStyle.value = "";
input.sampleLabelsOn.checked = true;
input.sampleLabelStyle.value = "";
input.valueLabelsOn.checked = true;
input.valueLabelStyle.value = "";
input.sampleDecimalCount.value = "";
input.valueLabelPrefix.value = "$";
input.valueLabelPostfix.value = "";
input.percentLabelsOn.checked = true;
input.percentLabelStyle.value = "";
input.percentDecimalCount.value = "";
input.legendOn.checked = true;
input.legendPosition.value = "";
input.legendLabels.value = "";
input.legendFont.value = "";
input.legendColors.value = "";
input.pieLabelsOn.checked = true;
input.pieLabelFont.value = "";
input.floatingLabelFont.value = "";
input.insideLabelFont.value = "";
input.Mode3DOn.checked = false;
input.angle.value = "";
input.depth.value = "";
input.selectionStyle.value = "";
input.detachedDistance.value = "";
input.sliceSeperatorOn.checked = false;
input.sliceSeperatorColor.value = "";
input.sampleColors.value = "red, orange, yellow";
input.background.value = "white";
input.foreground.value = "";
repaint();
}
function simple() {
parent.chart.Chart.chart.setAutomaticRepaintOn(false);
parent.chart.Chart.setParameter("sampleCount", "5");
var input = document.input;
input.seriesCount.value = "";
input.sampleCount.value = "";
input.sampleValues_0.value = "10,20,30,40,50";
input.sampleValues_1.value = "";
input.sampleValues_2.value = "";
input.chartTitle.value = "";
input.titleFont.value = "";
input.seriesLabels.value = "";
input.sampleLabels.value = "";
input.seriesLabelsOn.checked = false;
input.seriesLabelStyle.value = "";
input.sampleLabelsOn.checked = false;
input.sampleLabelStyle.value = "";
input.valueLabelsOn.checked = false;
input.valueLabelStyle.value = "";
input.sampleDecimalCount.value = "";
input.valueLabelPrefix.value = "";
input.valueLabelPostfix.value = "";
input.percentLabelsOn.checked = false;
input.percentLabelStyle.value = "";
input.percentDecimalCount.value = "";
input.legendOn.checked = false;
input.legendPosition.value = "";
input.legendLabels.value = "";
input.legendFont.value = "";
input.legendColors.value = "";
input.pieLabelsOn.checked = false;
input.pieLabelFont.value = "";
input.floatingLabelFont.value = "";
input.insideLabelFont.value = "";
input.Mode3DOn.checked = false;
input.angle.value = "";
input.depth.value = "";
input.selectionStyle.value = "";
input.detachedDistance.value = "";
input.sliceSeperatorOn.checked = false;
input.sliceSeperatorColor.value = "";
input.sampleColors.value = "";
input.background.value = "";
input.foreground.value = "";
repaint();
}
//-->
</script>
<form name="input">
<p>
<table width=600 cellspacing=0 cellpadding=1 border=0>
<tr><td colspan=3><font face="verdana, arial, helvetica" size=-1>
This form demonstrates the features of the chart. Type in a value in
the fields and click the parameter name to update the chart.
The applet code that generates the chart is shown
in the text box to the right of the chart.<br><br>
</font>
</td>
</tr>
<tr><td colspan=2 align=right>
<font face="verdana, arial, helvetica" size=-1>
<a href="javascript:complex()">complex chart</a><br>
<a href="javascript:simple()">simple chart</a>
</font>
</td>
</tr>
<tr><td><font face="verdana, arial, helvetica" size=-1><b>Values</b></font></td></tr>
<tr bgcolor="#e0e0e0">
<td align=left><font face="verdana, arial, helvetica" size=-1>
<a href="javascript:repaint()">seriesCount</a></font></td>
<td width=80% align=left><INPUT NAME="seriesCount" value="3" SIZE=3 MAXLENGTH=3></td>
</tr>
<tr>
<td align=left colspan=2><font face="verdana, arial, helvetica" size=-1>
Sets the number of data series in the chart. The default seriesCount is 1.
To read more than 1 series use the sampleValues_N parameter. You can
have as many data series as you wish.
</font></td>
</tr>
<tr><td><font size=-2> </font></td></tr>
<tr bgcolor="#e0e0e0">
<td align=left><font face="verdana, arial, helvetica" size=-1>
<a href="javascript:repaint()">sampleCount</a></font></td>
<td align=left><INPUT NAME="sampleCount" SIZE=3 MAXLENGTH=3></td>
</tr>
<tr>
<td align=left colspan=2><font face="verdana, arial, helvetica" size=-1>
Sets the number of samples in the the chart.
</font></td>
</tr>
<tr><td><font size=-2> </font></td></tr>
<tr bgcolor="#e0e0e0">
<td align=left><font face="verdana, arial, helvetica" size=-1>
<a href="javascript:repaint()">sampleValues_0</a></font></td>
<td align=left><INPUT NAME="sampleValues_0" value="200, 300" SIZE=40></td>
</tr>
<tr>
<td align=left colspan=2><font face="verdana, arial, helvetica" size=-1>
Sets the sample values for the first data series. If the sampleCount is
not specified the number of samples in the chart will equal the number
of values given with this parameter.
</font></td>
</tr>
<tr><td><font size=-2> </font></td></tr>
<tr bgcolor="#e0e0e0">
<td align=left><font face="verdana, arial, helvetica" size=-1>
<a href="javascript:repaint()">sampleValues_1</a></font></td>
<td align=left><INPUT NAME="sampleValues_1" value="300, 400" SIZE=40></td>
</tr>
<tr>
<td></td>
</tr>
<tr><td><font size=-2> </font></td></tr>
<tr bgcolor="#e0e0e0">
<td align=left><font face="verdana, arial, helvetica" size=-1>
<a href="javascript:repaint()">sampleValues_2</a></font></td>
<td align=left><INPUT NAME="sampleValues_2" value="160, 150" SIZE=40></td>
</tr>
<tr>
<td></td>
</tr>
<tr><td><font face="verdana, arial, helvetica" size=-1><br><br><b>Labels</b></font></td></tr>
<tr bgcolor="#e0e0e0">
<td align=left><font face="verdana, arial, helvetica" size=-1>
<a href="javascript:repaint()">chartTitle</a></font></td>
<td align=left><INPUT NAME="chartTitle" SIZE=20 value="Software Sales"></td>
</tr>
<tr>
<td align=left colspan=2><font face="verdana, arial, helvetica" size=-1>
Sets the title of the chart. Use \n for line breaks.
</font></td>
</tr>
<tr><td><font size=-2> </font></td></tr>
<tr bgcolor="#e0e0e0">
<td align=left><font face="verdana, arial, helvetica" size=-1>
<a href="javascript:repaint()">titleFont</a></font></td>
<td align=left><INPUT NAME="titleFont" SIZE=20 value="Courier, bold, 20"></td>
</tr>
<tr>
<td align=left colspan=2><font face="verdana, arial, helvetica" size=-1>
Sets the font used for the title.
</font></td>
</tr>
<tr><td><font size=-2> </font></td></tr>
<tr bgcolor="#e0e0e0">
<td align=left><font face="verdana, arial, helvetica" size=-1>
<a href="javascript:repaint()">seriesLabels</a></font></td>
<td align=left><INPUT NAME="seriesLabels" SIZE=20 value="Europe\n,America\n,Asia\n"></td>
</tr>
<tr>
<td align=left colspan=2><font face="verdana, arial, helvetica" size=-1>
Sets the labels for each series. These labels are displayed in the
legend if it's turned on. Use \n for line breaks.
</font></td>
</tr>
<tr><td><font size=-2> </font></td></tr>
<tr bgcolor="#e0e0e0">
<td align=left><font face="verdana, arial, helvetica" size=-1>
<a href="javascript:repaint()">sampleLabels</a></font></td>
<td align=left><INPUT NAME="sampleLabels" SIZE=20 value="Client Components\n,Server Components\n"></td>
</tr>
<tr>
<td align=left colspan=2><font face="verdana, arial, helvetica" size=-1>
Sets the labels for each sample. These labels are displayed below
each sample if the sampleLabelsOn is turned on. Use \n for line breaks.
</font></td>
</tr>
<tr><td><font size=-2> </font></td></tr>
<tr bgcolor="#e0e0e0">
<td align=left><font face="verdana, arial, helvetica" size=-1>
<a href="javascript:repaint()">seriesLabelsOn</a></font></td>
<td align=left><INPUT NAME="seriesLabelsOn" type=checkbox checked onClick=repaint()></td>
</tr>
<tr>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -