如何在 HTML5/Java 脚本的 Teechart 中使轴标签美观
How to make Axis Labels beautiful in Teechart for HTML5/Java Script
我想画的时候底轴标签漂亮lines.The数据大概是这样的：
[0.75,1.5,2.25,3,3.75,4.5,5.25,6,6.75]
但我想看到这样的标签：
1 2 3 4 5 6
谢谢！
<!DOCTYPE html>
<html>
<head>
<title>TeeChart JavaScript Line Series Example</title>
<!--[if lt IE 9]>
<script src="https://www.steema.com/files/public/teechart/html5/latest/src/excanvas/excanvas_text.js"></script>
<script src="https://www.steema.com/files/public/teechart/html5/latest/src/excanvas/canvas.text.js"></script>
<![endif]-->
<script src="https://www.steema.com/files/public/teechart/html5/latest/src/teechart.js" type="text/javascript"></script>
<script type="text/javascript">
var Chart1;
function draw() {
Chart1=new Tee.Chart("canvas");
var series = Chart1.addSeries(new Tee.Line());
var data = {
"xvalues" : [ 0.5, 1.5, 2.5, 3.5, 4.5, 5.5, 6.5, 7.5, 8.5, 9.5, 10.5, 11.5, 12.5, 13.5, 14.5, 15.5,
16.5, 17.5, 18.5, 19.5, 20.5, 21.5, 22.5, 23.5, 24.5, 25.5, 26.5, 27.5, 28.5, 29.5, 30.5,
31.5, 32.5, 33.5, 34.5, 35.5, 36.5, 37.5, 38.5, 39.5, 40.5, 41.5, 42.5, 43.5, 44.5, 45.5,
46.5, 47.5, 48.5, 49.5, 50.5, 51.5, 52.5, 53.5, 54.5, 55.5, 56.5, 57.5, 58.5, 59.5, 60.5,
61.5, 62.5, 63.5, 64.5, 65.5, 66.5, 67.5, 68.5, 69.5, 70.5, 71.5, 72.5, 73.5, 74.5, 75.5,
76.5, 77.5, 78.5, 79.5, 80.5, 81.5, 82.5, 83.5, 84.5, 85.5, 86.5, 87.5, 88.5, 89.5, 90.5,
91.5, 92.5, 93.5, 94.5, 95.5, 96.5, 97.5, 98.5, 99.5, 100.5, 101.5, 102.5, 103.5,
104.5, 105.5, 106.5, 107.5, 108.5, 109.5, 110.5, 111.5, 112.5, 113.5, 114.5, 115.5,
116.5, 117.5, 118.5, 119.5, 120.5, 121.5, 122.5, 123.5, 124.5, 125.5, 126.5, 127.5,
128.5, 129.5, 130.5, 131.5, 132.5, 133.5, 134.5, 135.5, 136.5, 137.5, 138.5, 139.5,
140.5, 141.5, 142.5, 143.5, 144.5, 145.5, 146.5, 147.5, 148.5, 149.5, 150.5, 151.5,
152.5, 153.5, 154.5, 155.5, 156.5, 157.5, 158.5, 159.5, 160.5, 161.5, 162.5, 163.5,
164.5, 165.5, 166.5, 167.5, 168.5, 169.5, 170.5, 171.5, 172.5, 173.5, 174.5, 175.5,
176.5, 177.5, 178.5, 179.5, 180.5, 181.5, 182.5, 183.5, 184.5, 185.5, 186.5, 187.5,
188.5, 189.5, 190.5, 191.5, 192.5, 193.5, 194.5, 195.5, 196.5, 197.5, 198.5, 199.5,
200.5, 201.5, 202.5, 203.5, 204.5, 205.5, 206.5, 207.5, 208.5, 209.5, 210.5, 211.5,
212.5, 213.5, 214.5, 215.5, 216.5, 217.5, 218.5, 219.5, 220.5, 221.5, 222.5, 223.5,
224.5, 225.5, 226.5, 227.5, 228.5, 229.5, 230.5, 231.5, 232.5, 233.5, 234.5, 235.5,
236.5, 237.5, 238.5, 239.5, 240.5, 241.5, 242.5, 243.5, 244.5, 245.5, 246.5, 247.5,
248.5, 249.5, 250.5, 251.5, 252.5, 253.5, 254.5, 255 ],
"yvalues" : [ 2.098175287246704, 2.098175287246704,
2.1077122688293457, 2.0409531593322754, 1.7548420429229736,
1.2970644235610962, 1.5927125215530396, 1.812064290046692,
-0.39099061489105225, -2.1744160652160645,
-3.3856191635131836, -3.8433966636657715,
0.4768794775009155, 1.1921570301055908,
-1.8310829401016235, 0.03817594051361084,
1.1063237190246582, -0.34330546855926514,
-0.8201571702957153, -0.15256476402282715,
0.20984256267547607, -0.9536756277084351,
-0.9632126092910767, -1.6308048963546753,
-1.7833975553512573, 0.2861388325691223,
-0.3623795509338379, -0.07626843452453613,
0.4387313723564148, -0.9822865724563599,
1.1921570301055908, 3.0518786907196045, 2.451045513153076,
3.36660099029541, 4.329841136932373, 3.3761377334594727,
2.489193916320801, 2.7753047943115234, 2.2412309646606445,
0.08586108684539795, -1.4209903478622437,
-3.1376562118530273, -3.2044153213500977,
0.8488238453865051, 0.2861388325691223, -2.002749443054199,
0.61039799451828, 0.5531758069992065, -1.1444164514541626,
-1.106268286705017, -0.7343238592147827,
-0.3146944046020508, -1.2207127809524536,
-1.993212342262268, -2.0981197357177734,
-1.9073792695999146, -1.3160828351974487,
-1.411453366279602, -0.8201571702957153,
-1.182564616203308, -2.0218234062194824,
0.31474989652633667, 1.9932680130004883,
1.5354902744293213, 2.584564208984375, 3.395212173461914,
2.00280499458313, 1.8502124547958374, 3.166323184967041,
2.0600271224975586, -0.5626572370529175,
-1.5354348421096802, -3.757563591003418,
-2.8896937370300293, 1.5354902744293213,
-0.8201571702957153, -2.0504345893859863,
1.1540089845657349, -0.6484905481338501,
-1.7643235921859741, -0.7820090055465698,
-0.9822865724563599, -0.5149720907211304,
-1.4400643110275269, -2.1553421020507812,
-2.307934284210205, -1.6212679147720337,
-0.1716388463973999, -0.2574721574783325,
-0.028583407402038574, -0.6389535665512085,
-1.8883050680160522, 0.13354623317718506,
1.5450273752212524, 1.087249755859375, 2.7657675743103027,
3.519193649291992, 1.8025271892547607, 2.231693744659424,
2.9565083980560303, 1.173082947731018,
-0.24793505668640137, -1.2683979272842407,
-3.194878578186035, -0.3242313861846924,
2.8802120685577393, -0.3528425693511963,
-0.14302778244018555, 2.155397415161133,
0.5722498297691345, 0.0953981876373291, 0.4005832076072693,
0.7916016578674316, -0.1621018648147583,
-1.411453366279602, -0.9346016645431519,
-1.4496015310287476, -0.42913877964019775,
0.2003055214881897, -0.7724720239639282,
0.18123137950897217, -1.1158052682876587,
-1.7261754274368286, 1.2303051948547363,
1.2970644235610962, 0.8488238453865051, 2.679934501647949,
2.1077122688293457, 0.4005832076072693, 1.087249755859375,
1.7643791437149048, 0.6962312459945679,
-1.0490459203720093, -2.8801565170288086,
-4.701729774475098, -1.5163606405258179, 1.430582880973816,
-1.8310829401016235, -1.2207127809524536,
1.5354902744293213, -0.2670091390609741,
-1.4305273294448853, -0.486361026763916,
0.2956758737564087, -0.6103423833847046,
-1.8024717569351196, -2.0408973693847656,
-2.441452980041504, -1.3446940183639526,
-0.7343238592147827, -0.5149720907211304,
0.3528980612754822, -1.1730273962020874,
-0.219323992729187, 2.7180824279785156, 2.47965669631958,
2.1935458183288574, 3.318915843963623, 3.0995640754699707,
2.1077122688293457, 2.660860538482666, 3.0232677459716797,
0.3338239789009094, -1.8978420495986938,
-3.1376562118530273, -4.453766822814941,
-0.5435832738876343, 0.6199350357055664,
-3.1376562118530273, -0.8869165182113647,
0.5436387658119202, -1.640342116355896,
-1.0490459203720093, -0.38145363330841064,
-0.3623795509338379, -0.8487683534622192,
-1.3446940183639526, -1.3733052015304565,
-1.5163606405258179, -0.5531201362609863,
-0.410064697265625, -0.5912683010101318,
-0.5149720907211304, -1.4782124757766724,
-0.37191665172576904, 2.2889161109924316,
2.2126197814941406, 1.8883605003356934, 3.8434524536132812,
2.8706750869750977, 1.1635459661483765, 2.9469714164733887,
2.9755825996398926, 0.6294720768928528,
-0.23839807510375977, -2.317471504211426,
-2.9278416633605957, 1.669008731842041, 1.3447495698928833,
-1.0108977556228638, 1.6785458326339722,
1.4591940641403198, -0.1621018648147583,
-0.40052759647369385, -0.3146944046020508,
0.6008609533309937, -0.9250646829605103,
-1.6308048963546753, -1.6784902811050415,
-2.508212089538574, -1.3542309999465942,
-1.106268286705017, -0.46728694438934326,
-0.23839807510375977, -2.6035823822021484,
-0.6389535665512085, 1.974193811416626, 0.6580831408500671,
1.9074347019195557, 2.8706750869750977, 0.8106757402420044,
1.0204904079437256, 2.250767707824707, 1.2589162588119507,
-0.9727495908737183, -2.6989526748657227,
-4.58728551864624, -3.7194151878356934,
0.22891658544540405, -1.2588609457015991,
-2.8610825538635254, 0.0953981876373291,
-1.0013607740402222, -2.918304920196533,
-1.5449718236923218, -0.6389535665512085,
-0.5245091915130615, -1.0776571035385132,
-1.6784902811050415, -2.031360626220703,
-1.3637679815292358, -0.30515730381011963,
-0.2574721574783325, 0.8297497630119324,
0.14308321475982666, -1.1730273962020874,
1.3256754875183105, 2.7562308311462402, 2.098175287246704,
3.2330822944641113, 3.748082160949707, 2.584564208984375,
2.861138105392456, 3.137712001800537, 1.440119981765747,
-0.1334906816482544 ]};
series.data = {
labels : data.xvalues,
values : data.yvalues
};
Chart1.axes.left.title.text="Y";
//Chart1.series.items[0].marks.drawEvery=120;
Chart1.title.text="TeeChart for JavaScript";
Chart1.title.format.font.style="18px Verdana";
Chart1.title.format.font.gradient.visible=true;
Chart1.legend.visible=false;
Chart1.draw();
}
</script>
</head>
<body onload="draw()">
<center>
<br><canvas id="canvas" width="600" height="400">
This browser does not seem to support HTML5 Canvas.
</canvas>
</center>
</body>
</html>
尝试将轴增量设置为 1:
Chart1.axes.bottom.increment = 1;
我已经解决了这个问题。
1.change数据到series.data=
{标签：[]，x：data.xvalues，值：data.yvalues}；
2.set:
Chart1.axes.bottom.increment = 1;
3.rewrite ongetlabel 函数。
我想画的时候底轴标签漂亮lines.The数据大概是这样的：
[0.75,1.5,2.25,3,3.75,4.5,5.25,6,6.75]
但我想看到这样的标签：
1 2 3 4 5 6
谢谢！
<!DOCTYPE html>
<html>
<head>
<title>TeeChart JavaScript Line Series Example</title>
<!--[if lt IE 9]>
<script src="https://www.steema.com/files/public/teechart/html5/latest/src/excanvas/excanvas_text.js"></script>
<script src="https://www.steema.com/files/public/teechart/html5/latest/src/excanvas/canvas.text.js"></script>
<![endif]-->
<script src="https://www.steema.com/files/public/teechart/html5/latest/src/teechart.js" type="text/javascript"></script>
<script type="text/javascript">
var Chart1;
function draw() {
Chart1=new Tee.Chart("canvas");
var series = Chart1.addSeries(new Tee.Line());
var data = {
"xvalues" : [ 0.5, 1.5, 2.5, 3.5, 4.5, 5.5, 6.5, 7.5, 8.5, 9.5, 10.5, 11.5, 12.5, 13.5, 14.5, 15.5,
16.5, 17.5, 18.5, 19.5, 20.5, 21.5, 22.5, 23.5, 24.5, 25.5, 26.5, 27.5, 28.5, 29.5, 30.5,
31.5, 32.5, 33.5, 34.5, 35.5, 36.5, 37.5, 38.5, 39.5, 40.5, 41.5, 42.5, 43.5, 44.5, 45.5,
46.5, 47.5, 48.5, 49.5, 50.5, 51.5, 52.5, 53.5, 54.5, 55.5, 56.5, 57.5, 58.5, 59.5, 60.5,
61.5, 62.5, 63.5, 64.5, 65.5, 66.5, 67.5, 68.5, 69.5, 70.5, 71.5, 72.5, 73.5, 74.5, 75.5,
76.5, 77.5, 78.5, 79.5, 80.5, 81.5, 82.5, 83.5, 84.5, 85.5, 86.5, 87.5, 88.5, 89.5, 90.5,
91.5, 92.5, 93.5, 94.5, 95.5, 96.5, 97.5, 98.5, 99.5, 100.5, 101.5, 102.5, 103.5,
104.5, 105.5, 106.5, 107.5, 108.5, 109.5, 110.5, 111.5, 112.5, 113.5, 114.5, 115.5,
116.5, 117.5, 118.5, 119.5, 120.5, 121.5, 122.5, 123.5, 124.5, 125.5, 126.5, 127.5,
128.5, 129.5, 130.5, 131.5, 132.5, 133.5, 134.5, 135.5, 136.5, 137.5, 138.5, 139.5,
140.5, 141.5, 142.5, 143.5, 144.5, 145.5, 146.5, 147.5, 148.5, 149.5, 150.5, 151.5,
152.5, 153.5, 154.5, 155.5, 156.5, 157.5, 158.5, 159.5, 160.5, 161.5, 162.5, 163.5,
164.5, 165.5, 166.5, 167.5, 168.5, 169.5, 170.5, 171.5, 172.5, 173.5, 174.5, 175.5,
176.5, 177.5, 178.5, 179.5, 180.5, 181.5, 182.5, 183.5, 184.5, 185.5, 186.5, 187.5,
188.5, 189.5, 190.5, 191.5, 192.5, 193.5, 194.5, 195.5, 196.5, 197.5, 198.5, 199.5,
200.5, 201.5, 202.5, 203.5, 204.5, 205.5, 206.5, 207.5, 208.5, 209.5, 210.5, 211.5,
212.5, 213.5, 214.5, 215.5, 216.5, 217.5, 218.5, 219.5, 220.5, 221.5, 222.5, 223.5,
224.5, 225.5, 226.5, 227.5, 228.5, 229.5, 230.5, 231.5, 232.5, 233.5, 234.5, 235.5,
236.5, 237.5, 238.5, 239.5, 240.5, 241.5, 242.5, 243.5, 244.5, 245.5, 246.5, 247.5,
248.5, 249.5, 250.5, 251.5, 252.5, 253.5, 254.5, 255 ],
"yvalues" : [ 2.098175287246704, 2.098175287246704,
2.1077122688293457, 2.0409531593322754, 1.7548420429229736,
1.2970644235610962, 1.5927125215530396, 1.812064290046692,
-0.39099061489105225, -2.1744160652160645,
-3.3856191635131836, -3.8433966636657715,
0.4768794775009155, 1.1921570301055908,
-1.8310829401016235, 0.03817594051361084,
1.1063237190246582, -0.34330546855926514,
-0.8201571702957153, -0.15256476402282715,
0.20984256267547607, -0.9536756277084351,
-0.9632126092910767, -1.6308048963546753,
-1.7833975553512573, 0.2861388325691223,
-0.3623795509338379, -0.07626843452453613,
0.4387313723564148, -0.9822865724563599,
1.1921570301055908, 3.0518786907196045, 2.451045513153076,
3.36660099029541, 4.329841136932373, 3.3761377334594727,
2.489193916320801, 2.7753047943115234, 2.2412309646606445,
0.08586108684539795, -1.4209903478622437,
-3.1376562118530273, -3.2044153213500977,
0.8488238453865051, 0.2861388325691223, -2.002749443054199,
0.61039799451828, 0.5531758069992065, -1.1444164514541626,
-1.106268286705017, -0.7343238592147827,
-0.3146944046020508, -1.2207127809524536,
-1.993212342262268, -2.0981197357177734,
-1.9073792695999146, -1.3160828351974487,
-1.411453366279602, -0.8201571702957153,
-1.182564616203308, -2.0218234062194824,
0.31474989652633667, 1.9932680130004883,
1.5354902744293213, 2.584564208984375, 3.395212173461914,
2.00280499458313, 1.8502124547958374, 3.166323184967041,
2.0600271224975586, -0.5626572370529175,
-1.5354348421096802, -3.757563591003418,
-2.8896937370300293, 1.5354902744293213,
-0.8201571702957153, -2.0504345893859863,
1.1540089845657349, -0.6484905481338501,
-1.7643235921859741, -0.7820090055465698,
-0.9822865724563599, -0.5149720907211304,
-1.4400643110275269, -2.1553421020507812,
-2.307934284210205, -1.6212679147720337,
-0.1716388463973999, -0.2574721574783325,
-0.028583407402038574, -0.6389535665512085,
-1.8883050680160522, 0.13354623317718506,
1.5450273752212524, 1.087249755859375, 2.7657675743103027,
3.519193649291992, 1.8025271892547607, 2.231693744659424,
2.9565083980560303, 1.173082947731018,
-0.24793505668640137, -1.2683979272842407,
-3.194878578186035, -0.3242313861846924,
2.8802120685577393, -0.3528425693511963,
-0.14302778244018555, 2.155397415161133,
0.5722498297691345, 0.0953981876373291, 0.4005832076072693,
0.7916016578674316, -0.1621018648147583,
-1.411453366279602, -0.9346016645431519,
-1.4496015310287476, -0.42913877964019775,
0.2003055214881897, -0.7724720239639282,
0.18123137950897217, -1.1158052682876587,
-1.7261754274368286, 1.2303051948547363,
1.2970644235610962, 0.8488238453865051, 2.679934501647949,
2.1077122688293457, 0.4005832076072693, 1.087249755859375,
1.7643791437149048, 0.6962312459945679,
-1.0490459203720093, -2.8801565170288086,
-4.701729774475098, -1.5163606405258179, 1.430582880973816,
-1.8310829401016235, -1.2207127809524536,
1.5354902744293213, -0.2670091390609741,
-1.4305273294448853, -0.486361026763916,
0.2956758737564087, -0.6103423833847046,
-1.8024717569351196, -2.0408973693847656,
-2.441452980041504, -1.3446940183639526,
-0.7343238592147827, -0.5149720907211304,
0.3528980612754822, -1.1730273962020874,
-0.219323992729187, 2.7180824279785156, 2.47965669631958,
2.1935458183288574, 3.318915843963623, 3.0995640754699707,
2.1077122688293457, 2.660860538482666, 3.0232677459716797,
0.3338239789009094, -1.8978420495986938,
-3.1376562118530273, -4.453766822814941,
-0.5435832738876343, 0.6199350357055664,
-3.1376562118530273, -0.8869165182113647,
0.5436387658119202, -1.640342116355896,
-1.0490459203720093, -0.38145363330841064,
-0.3623795509338379, -0.8487683534622192,
-1.3446940183639526, -1.3733052015304565,
-1.5163606405258179, -0.5531201362609863,
-0.410064697265625, -0.5912683010101318,
-0.5149720907211304, -1.4782124757766724,
-0.37191665172576904, 2.2889161109924316,
2.2126197814941406, 1.8883605003356934, 3.8434524536132812,
2.8706750869750977, 1.1635459661483765, 2.9469714164733887,
2.9755825996398926, 0.6294720768928528,
-0.23839807510375977, -2.317471504211426,
-2.9278416633605957, 1.669008731842041, 1.3447495698928833,
-1.0108977556228638, 1.6785458326339722,
1.4591940641403198, -0.1621018648147583,
-0.40052759647369385, -0.3146944046020508,
0.6008609533309937, -0.9250646829605103,
-1.6308048963546753, -1.6784902811050415,
-2.508212089538574, -1.3542309999465942,
-1.106268286705017, -0.46728694438934326,
-0.23839807510375977, -2.6035823822021484,
-0.6389535665512085, 1.974193811416626, 0.6580831408500671,
1.9074347019195557, 2.8706750869750977, 0.8106757402420044,
1.0204904079437256, 2.250767707824707, 1.2589162588119507,
-0.9727495908737183, -2.6989526748657227,
-4.58728551864624, -3.7194151878356934,
0.22891658544540405, -1.2588609457015991,
-2.8610825538635254, 0.0953981876373291,
-1.0013607740402222, -2.918304920196533,
-1.5449718236923218, -0.6389535665512085,
-0.5245091915130615, -1.0776571035385132,
-1.6784902811050415, -2.031360626220703,
-1.3637679815292358, -0.30515730381011963,
-0.2574721574783325, 0.8297497630119324,
0.14308321475982666, -1.1730273962020874,
1.3256754875183105, 2.7562308311462402, 2.098175287246704,
3.2330822944641113, 3.748082160949707, 2.584564208984375,
2.861138105392456, 3.137712001800537, 1.440119981765747,
-0.1334906816482544 ]};
series.data = {
labels : data.xvalues,
values : data.yvalues
};
Chart1.axes.left.title.text="Y";
//Chart1.series.items[0].marks.drawEvery=120;
Chart1.title.text="TeeChart for JavaScript";
Chart1.title.format.font.style="18px Verdana";
Chart1.title.format.font.gradient.visible=true;
Chart1.legend.visible=false;
Chart1.draw();
}
</script>
</head>
<body onload="draw()">
<center>
<br><canvas id="canvas" width="600" height="400">
This browser does not seem to support HTML5 Canvas.
</canvas>
</center>
</body>
</html>
尝试将轴增量设置为 1:
Chart1.axes.bottom.increment = 1;
我已经解决了这个问题。
1.change数据到series.data= {标签：[]，x：data.xvalues，值：data.yvalues}；
2.set: Chart1.axes.bottom.increment = 1;
3.rewrite ongetlabel 函数。