标签：3d teechart html5 canvas javascript

使用teecharts评估副本中的示例,我们尝试在同一画布上绘制多个图表,但是它不起作用.它所做的只是简单地绘制在末尾绘制的图形(在if(three.isEnabled()){part内),而忽略了在其之前绘制的图形.

var three, Chart1, Chart2, surface;

function draw() {

  // Create 3D WebGL context:
  three  = new Tee.Three("canvas1");

  // Create Chart:
  Chart1 = new Tee.Chart(three);

  Chart2 = new Tee.Chart(three);      
  Chart1.walls.visible=false;

  // Create Surface:
  surface = new Tee.Surface();

  // Add Surface series to Chart:
  Chart1.addSeries(surface);
  Chart2.addSeries(new Tee.Line()).addRandom(1000);

  changeSurface("s3");
  // Cosmetics:

  Chart1.title.text="TeeChart Surface 3D";
  Chart1.walls.back.size=0.2;
  Chart1.walls.back.format.transparency=0.2;

  // Valid webGL ?

  if (three.isEnabled()) {

    Chart1.draw();
    Chart2.draw();

    animate();
  }
  else
    Detector.addGetWebGLMessage(); // Show message (WebGL not available)

  // Loop
  function animate() {
    three.update();
    requestAnimationFrame( animate );
  }

}

我的问题是：是否可以在同一画布内绘制多个图形？(用多个,我并不意味着它们会共享轴,而是意味着在画布内有两个完全独立的图表对象)

解决方法:

同一Canvas中不能有两个TChart对象.其他一些TeeChart版本具有SubChart工具,可让您执行此操作,但是TeeChart Javascript中未实现.

在Teechart Javascript中,您有两种选择可以实现几乎相同的效果：

>具有不同的TChart对象.参见示例here.
>具有多个“自定义”轴的TChart.参见示例here.在这一示例中,请注意,您正在手动设置轴的位置,因此,如果需要,可以在左侧分离不同的垂直轴.还要注意,在此示例中,仅存在一个水平轴,但是您也可以按照创建垂直轴的相同方式创建多个轴.

标签：3d,teechart,html5,canvas,javascript
来源： https://codeday.me/bug/20191121/2055351.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。