在 HTML 5 / Javascript Techart 上绘制矩形答案

【问题标题】：Draw rectangle on HTML 5 / Javascript Teechart在 HTML 5 / Javascript Techart 上绘制矩形
【发布时间】：2012-06-07 18:04:23
【问题描述】：

我需要在 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 中使用格式对象，但没有帮助

Chart1.panel.format.rectPath(20,20,30,40);

【问题讨论】：

你试过什么？问题在被问到之前没有表现出足够的努力
目前我正在使用 Bar Series 在图表上绘制矩形。我想知道是否有其他优雅的方法可以做到这一点。

标签： javascript html teechart

【解决方案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

【讨论】：

只有当我可以使用 Teecharts 在画布坐标到图表 XY 位置之间进行转换时，我才能做到这一点。我想使用 TeeChart，因为它可以很好地扩展大数据点
您可以使用 Axis calc(value) 函数将轴坐标转换为像素
如何将 x,y 值传递给 Axis 坐标？
如何将 X,Y 值传递给 Axis 的 calc 函数以获取坐标？您能提供在图表上绘制矩形的示例代码吗？
Axis calc 方法将轴比例转换为画布像素坐标。左右轴返回“Y”，上下轴返回“X”。 var myFormat = new Tee.Format(Chart1); myFormat.gradient.visible=true; myFormat.transparency=0.3; Chart1.ondraw=function() { var x1 = Chart1.axes.bottom.calc(4), y1 = Chart1.axes.left.calc(70), x2 = Chart1.axes.bottom.calc(7), y2 = Chart1.axes.left.calc(40); // X,Y, 宽度, 高度 myFormat.rectangle(x1,y1, x2-x1, y2-y1); }

【解决方案2】：

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

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

Steema 支持中心

【讨论】：

我在图表中有多个系列（线 + 条），添加甘特系列无济于事，因为我想要像浮动条一样的顶部水平条。当我使用以下代码绘制矩形时 - Chart1.panel.format.rectPath(20,20,30,40); ，我在 teechart 中遇到其他错误。有没有办法解决这个问题。
另一种选择是使用带有空文本的注释工具
注释工具对我没有帮助，因为它不会随图表一起缩放。然而，具有多个 x 轴的甘特系列解决了这个问题。感谢 Yeray 的支持。