图表的背景一般是精心设计的它有一定的梯度、网格线、号码标签和月份名称等等，如果直接通过JavaScript进行绘制可能需数十行或上百行的代码。但是如果我们直接通过Canvas直接创建一个背景图。我们只需要在其他的软件如PS上绘制好一个背景图，然后加载到Canvas上就可以了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘制图表</title>
</head>
<body>
<div id="result-stub" class="well hidden">
<canvas id="canvas" width="345" height="345">
<p>你的浏览器不支持canvas元素</p>
</canvas>
</div>
<script>
// 1、要绘制图表首先我们要获取到canvas对象以及具有图表背景的图片对象。
var
canvas = document.getElementById('canvas'),
context = null
context = canvas.getContext('2d')
var img = new Image()
img.src ='chart-background.png'//这里是一张具有图表背景的图片
// 2、绘制一个具有图表背景的图片后再根据要绘制的曲线图各个点在canvas是中的坐标绘制直线。
img.onload = function() {
//绘制图片
context.drawImage(img, 0, 0)
//绘制直线
context.beginPath()
context.moveTo(70, 105)
context.lineTo(105, 132)
context.lineTo(142, 250)
context.lineTo(176, 175)
context.lineTo(212, 145)
context.lineTo(245, 197)
context.lineTo(280, 90)
context.stroke()
}
</script>
<script src="jquery.js"></script>
</body>
</html>
3、本示例的最终绘制效果如下：这样一个曲线图表就绘制出来的，其他的图表也可以用类似的方法进行绘制。
这些都是有关于HTML5新特性的一些应用。给你推荐一个教程网站秒秒学，该网站上有关于HTML5新特性的讲解。
1、数据准备
在制作图表前，需要先定义图表的数据来源。新建工作簿，添加数据集，SQL语句为SELECT*FROM[销量]，使用销量表作为图表的数据来源。
2、插入图表并选择图表类型
点击工具栏中的插入>悬浮元素>插入图表，d出图表向导，选择图表类型如柱形图，如下图：
3、定义图表样式
选择完图表类型后，点击确定，返回报表主体界面，选中悬浮图表，在报表主体右侧上方的图表属性表中设置图表属性，选择图表属性表-数据，设置柱形图的数据，如下图：
4、设置图表样式
对图表标题、标签等样式进行相应的设置
5、保存模板并预览。
将你做好的要发布的图表/dashbord，点击desktop顶部菜单“服务器”--“Tableau Public”--“保存到Tableau Public”这里会d出需要输入public的注册账号和密码登录。输入第一步已经注册好的账号和密码。当然，如果这一步仍然还没注册，可以点橙色登录按钮下“Create one now for free”，也即“新注册一个账号”，也会d出注册界面。这里不做过细介绍。会有一小段图表上传的进度条提示，提示完成一般正常会在默认浏览器界面直接d出刚才上传完成的图表，如图所示，是我在public个人空间已经看到发布好的图表。点击这个图表，可以打开大图，大图的右下角有个“共享”，你点击一下，会d出两个选择。一个是“链接”，链接可以分享给朋友打开查看了，这是一个分享方法；另外一个是“嵌入代码”，意思是，这个图你可以在你的网页、博客（支持代码）地方插入，让查看网页的人在你的网站博客互动图表。嵌入代码使用我们以 新浪SAE为例介绍一下。（SAE是啥我这里不做详细介绍，仅介绍切入tableau public图的方法，对SAE有兴趣的可自行另外了解。）我们新建一个public.html网页文件，我们将上一步复制到的“嵌入代码”嵌入到这个网页文件中。保存一下最终我们直接访问这个页面，看到public这个图就切入到我们的网站了，客户可以在这个网站直接点图表互动，因为这个是一个互动图，数据会实时更新。类似博客切入也是可以的，参考同样原理。 还可以参考欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）