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对象。请参阅示例here。
让TChart具有多个自定义轴。请参阅示例here。在这一个中，请注意您手动设置轴的位置，因此如果需要，您可以分离左侧的不同垂直轴。并且还注意在这个例子中只有一个水平轴，但你也可以用创建垂直轴的方式创建几个。

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

1 个答案: