Используя пример из оценочной копии 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 );
  }

}

Мой вопрос: можно ли построить несколько графиков внутри одного холста? (Под несколькими я не имею в виду, что у них будут общие оси, я имею в виду два полностью отдельных объекта диаграммы внутри холста)

3
Mitul Shah 2 Апр 2014 в 16:27

1 ответ

Лучший ответ

На одном холсте не может быть двух объектов TChart. В некоторых других версиях TeeChart есть инструмент SubChart, который позволяет это делать, но он не реализован в TeeChart Javascript.

В Teechart Javascript у вас есть две альтернативы для достижения почти того же:

  • Имеют разные объекты TChart. См. Пример здесь .

  • Имейте TChart с несколькими настраиваемыми осями. См. Пример здесь . Обратите внимание, что в этом случае вы вручную устанавливаете положения осей, поэтому, если хотите, вы можете разделить различные вертикальные оси с левой стороны. Также обратите внимание, что в этом примере есть только горизонтальная ось, но вы также можете создать несколько так же, как создаются вертикальные оси.

3
Yeray 4 Апр 2014 в 19:12
Спасибо за ответ, мы пошли дальше и использовали базовые threejs для наших поверхностных диаграмм.
 – 
Mitul Shah
11 Апр 2014 в 15:15