javascript-Tee图表中同一画布上的多个图形

使用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