基于HTML5的动画折线图的设计建议

问题描述

| 我正计划开发一个可滚动/实时/动画折线图，以便在浏览器中运行（使用HTML5）。它将被集成到一个执行某些计算密集型工作（DSP）的应用程序中，因此我需要图形/动画要快速并且具有最小的开销。我已经在Silverlight中创建了这样的应用程序，但是由于支持该功能的平台数量有限，我认为最好还是专注于HTML5，因为它可能足够快。 -关于canvas / svg是否更合适，或者是否有一些现有的库/应用程序我有什么建议？ -是否有任何特定于平台的注意事项（尤其是针对移动/平板电脑的使用）？ 谢谢！     

解决方法

        SVG是最简单的编码-基本上只是在标记中制作线，然后使用对象或iframe打开线图

<?xml version=\"1.0\" standalone=\"no\"?>
<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\"
\"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">

<svg width=\"100%\" height=\"100%\" version=\"1.1\"
xmlns=\"http://www.w3.org/2000/svg\">

<line x1=\"0\" y1=\"0\" x2=\"300\" y2=\"300\"
style=\"stroke:rgb(99,99,99);stroke-width:2\"/>

</svg>

可以在服务器上完成计算量大的工作，并且可以使用类来处理样式，就像html中的样式一样。 SVG的局限性在于浏览器对animation标签的支持。而且SVG尚未完全受HTML内联支持，因此您需要将其视为图像。 Canvas要求您使用Java脚本绘制线条。同样，可以在服务器上完成计算量大的工作，并且只用需要绘制的内容交付Javascript。但是使用画布可能需要更多时间。 您还可以将脚本与SVG一起使用，以下是几个示例：http://www.carto.net/papers/svg/manipulating_svg_with_dom_ecmascript/