【发布时间】：2012-06-29 03:56:47
【问题描述】：
我对客户端 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>
感谢任何 cmets。谢谢！
【问题讨论】：
标签： jquery html canvas highcharts