javascript - T 形图中同一 Canvas 上的多个图形

Question

使用 teecharts 评估副本中的示例，我们尝试在同一 Canvas 上绘制多个图表，但它不起作用。它所做的只是简单地绘制最后绘制的图形(在 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 );
  }

}

我的问题是:是否可以在同一个 Canvas 内绘制多个图表？(我所说的多个并不是说它们会共享轴，我的意思是 Canvas 内有两个完全独立的图表对象)

Answer 1

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

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

• 有不同的 TChart 对象。参见示例 here .

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