在HTML 5 / Javascript Teechart上绘制矩形

Question

我需要在HTML 5/JavaScript Tee图表上绘制垂直和水平矩形/条带（如甘特图）。

我可以使用 Bar 系列绘制一个矩形，如下所示，但我希望矩形浮动在特定 XY 坐标上，而不是从 x 轴站立。

var series1 = new Tee.Bar();
                     series1.data.values = [30000];
                     //alert(" openValues[y] "+ openValues[y] + " closeValues[y]  "+ closeValues[y] );
                     series1.data.x = [ (openValues[y] + closeValues[y]) /2 ];
                     series1.format.shadow.visible = false;
                     series1.format.lineCap = "round";
                     series1.format.stroke.fill = "#D3D3D3";
                     series1.format.stroke.size = .5;
                     series1.colorEach = "auto";
                     series1.format.join = "round";
                     series1.format.cap = "square";
                     series1.format.fill="#F8F8FF";
                     series1.barSize=100000;
                     //series1.format.transparent =1;
                     series1.color = "silver";
                     series1.marks.visible = false;
                     //series1.hover.shadow =false;
                     series1.hover.stroke.size =.01;
                     Chart1.addSeries(series1);

是否可以使用 HTML 5/Javascript Teecharts 只绘制一个矩形。我想像在甘特图中一样绘制具有特定 x1，y1，x2 和 y2 值的矩形。

我尝试在 Teecharts 中使用格式对象，但它没有帮助

图表1.panel.format.rectPath（20，20，30，40）;

Answer 1

要使用 html5 绘制简单的矩形...

window.onload = function() {
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    context.beginPath();
    context.rect(188, 50, 200, 100);
    context.fillStyle = '#8ED6FF';
    context.fill();
    context.lineWidth = 5;
    context.strokeStyle = 'black';
    context.stroke();
  };

这是使用 HTML5 的甘特图的示例链接

http://www.eecg.toronto.edu/~brousse1/Libraries/RGraph/docs/gantt.html

Answer 2

下一个TeeChart Javascript v1.1将包括甘特系列。这是演示：http://www.steema.us/files/jscript/demos/series/gantt/gantt.htm

我们很高兴听到任何关于它的评论。

斯蒂玛支持中心