javascript - 如何在 Teechart for HTML5/Javascript 中使轴标签美观-6ren

javascript - 如何在 Teechart for HTML5/Javascript 中使轴标签美观

转载作者：行者123 更新时间：2023-11-28 18:36:11

我想让我的底轴标签在画线时漂亮。数据大概是这样的:

[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;

关于javascript - 如何在 Teechart for HTML5/Javascript 中使轴标签美观，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37040431/

文章推荐： JavaScript - 将 for 循环中的多个结果推送到数组中

文章推荐： jQuery UI-Slider 没有 'live' 效果和 CSS 样式

文章推荐： javascript - WeakMap 能让我避免父/子关系的内存泄漏吗？

5款开源、美观、强大的WPFUI组件库
前言经常看到有小伙伴在DotNetGuide技术社区交流群里提问：WPF有什么好用或者好看的UI组件库？,今天大姚给大家分享5款开源、美观、强大、简单易用的WPF UI组件库。 WPF介绍 W
flash - 如何以编程方式绘制可缩放、美观、弯曲的漫画书气球尾部？
作为 UI 专家，我经常被要求构建工具提示显示和其他类型的显示文本的弹出窗口。客户似乎 HitTest 衷的一种风格是漫画书气球中的文字。我想以编程方式创建此气球(而不是嵌入或链接到呈现的图形)，因为

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何在 Teechart for HTML5/Javascript 中使轴标签美观