1

我对客户端 Web 开发还很陌生，所以请随意编辑我的问题，如果有什么没有多大意义的话。

关于基于 HTML5/JavaScript 和 jQuery 的图表库，让我以RGraph（命名为 HTML5/JavaScript 图表）和HighCharts（命名为 jQuery 框架下的 JavaScript 图表）为例。

RGraph使用标签来显示生成的图表，<canvas>如其文档中所示。然而HighCharts使用<div>标签作为他们图表的占位符。

我正在尝试像RGraph那样将HighCharts放入<canvas>标签中（这对您来说可能听起来很奇怪......我不知道），图表将无法显示。反过来，如果我将RGraph图表作为HighCharts放入占位符，也会出现同样的问题。<div>

我所看到的只是占位符，所有花哨的交互操作都被 JavaScript 关闭了。那么为什么会出现上述问题呢？我相信 RGraph 和 HighCharts 之间的一些配置差异可能是有原因的，但不知道那些是什么......

<canvas>在和<div>标签中渲染图表有什么区别？

~~~~~~~~~~~~~~~~~

以下是我的演示脚本：

将RGraph放入<canvas>，效果很好：

<!DOCTYPE html>
<html>
    <head>

        <script>
                Scripts go here 
        </script>

    </head>
    <body>

        <div>
            <h1>Basic RGraph Example</h1>
            <h2>Line Chart</h2>
            <canvas id="line" width="400" height="300"></canvas>
            <h2>Pie Chart</h2>
            <canvas id="pie" width="400" height="300"></canvas>
            <h2>Bar Chart</h2>
            <canvas id="bar" width="400" height="300"></canvas>

        </div>

    </body>
</html>

<div>如果我将图表放入标签中则不起作用：

<!DOCTYPE html>
<html>
    <head>

        <script>
                Scripts go here 
        </script>

    </head>
    <body>

        <div>
            <h1>Basic RGraph Examples</h1>
            <h2>Pie Chart</h2>
            <div id="line" width="400" height="300"></div>
            <h2>Line Chart</h2>
            <div id="pie" width="400" height="300"></div>
            <h2>Bar Chart</h2>
            <div id="bar" width="400" height="300"></div>

        </div>

    </body>
</html>

任何意见表示赞赏。谢谢！

4

2 回答 2

3

<div>标签和标签并不是真正的<canvas>javascript 图表上的分界线。它真的是画布 vs SVG。RCharts 使用画布绘制图表。Highcharts 使用 SVG。Highcharts 只是使用 div 作为图表的容器。这允许用户指定图表将在 DOM 中绘制的位置。类似地，flot 和 jqplot（它们都使用画布来渲染它们的图）以相同的方式使用 div 标签。

所以现在你的问题变成了画布与 SVG 的绘图？在此处和此处阅读有关内容。

于 2012-06-27T16:48:29.180 回答
1

首先：<canvas>是对 HTML 标准的一个相对较新的补充，并不是所有浏览器或版本都普遍支持。但是，它可能是有效且可靠地显示此类信息的最佳选择。

至于使用其他标签时您的内容不显示的原因：

该<canvas>标签允许您指定后备内容。例如，以下代码段：

<canvas>Your browser does not support the canvas tag!</canvas>

Your browser does not support the canvas tag!在不支持标签的浏览器上将显示为<canvas>，但在支持标签的浏览器上，将插入一个 300x150 的画布，并显示为透明框。

在相反的情况下，尝试使用传统的标签 like<div>和使用canvas-specific 操作 likegetContext()不会做任何事情，甚至在未处理的情况下会引发错误。

这两个库都不太可能处理这些使用场景，并且要么静默失败，要么将大量调试信息注入您的控制台。

这两种方法的主要区别在于，渲染直接将像素/线条/文本绘制到“渲染上下文”中，并且出于多种原因，它是渲染此类数据<canvas>的更好替代方案。<div>然而，由于缺乏跨浏览器支持，人们通常会避免这种技术。

<div>另一方面，渲染会创建模拟数据可视化表示所需的所有形状和元素的 DOM 元素，这取决于数据的分辨率和图表的大小，这可能意味着对性能的影响可以忽略不计或显着浏览器兼容性的成本。

一种中间立场是使用像excanvas这样的 polyfill在大多数浏览器中提供画布支持，甚至是最新的 IE 版本。

但是，请参阅您的库的文档。如果您使用库进行渲染，它们可能已经实现了 polyfill，甚至在<canvas>元素中为不受支持的浏览器实现了回退内容。

于 2012-06-27T16:47:48.193 回答