Question

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

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

RGraph 使用<canvas>标记显示生成的图表，如文档中所示。但是 HighCharts 使用<div>标记作为其图表的占位符。

我正试图将 HighCharts 放入<canvas>标签，就像 RGraph 一样（这对你来说可能听起来很奇怪......我不知道），图表将无法显示。反过来说，如果我将 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>

任何评论都表示赞赏。谢谢！

Answer 1

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

所以现在你的问题变成了画布与SVG的绘图？阅读here和here。

Answer 2

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

关于使用其他标签时内容未显示的原因：

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

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

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

在相反的情况下，尝试使用<div>之类的常规标记并使用canvas等特定操作（如getContext()）将无法执行任何操作，甚至在未处理时会引发错误。

两个库都不可能处理这些使用场景，并且要么无声地失败，要么将大量调试信息泵入控制台。

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

另一方面，

<div>渲染创建了模拟数据可视化表示所需的所有形状和元素的DOM元素，这取决于数据的分辨率和图表的大小，可能意味着以浏览器兼容性为代价的可忽略或显着的性能影响。

一个中间立场是使用像excanvas之类的polyfill来在大多数浏览器中提供画布支持，甚至是最近的IE版本。

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

HTML5 / JavaScript和基于jQuery的图表库之间的区别

2 个答案: