三通图中同一画布上的多个图形

Question

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

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 );
  }

}

我的问题是：是否可以在同一画布内绘制多个图形？（多个我的意思不是它们会共享轴，我的意思是画布内两个完全独立的图表对象）

Answer 1

不能在同一 Canvas 中有两个 TChart 对象。其他一些TeeChart版本具有SubChart工具，允许您执行此操作，但这在TeeChart Javascript中未实现。

在Teechart Javascript中，你有两种选择来实现几乎相同的目标：

• 具有不同的 TChart 对象。请参阅此处的示例。

• 拥有具有多个自定义轴的 TChart。请参阅此处的示例。在此中，请注意您正在手动设置轴的位置，因此如果需要，可以在左侧分隔不同的垂直轴。还要注意，在这个例子中只有一个水平轴，但你也可以用与创建垂直轴相同的方式创建几个。