如何在 HTML 页面上显示出有交互的统计图

在 HTML 页面上显示出有交互的统计图有2种方法：

一、用JavaScript做出饼状图或柱形图，需要精通JS代码。

二、利用第三方网站提供的组件：

1、Open Flash Chart是一个开源的Flash制图组件。

2、 XML SWF Charts是一个简单，但强大，利用Flash和动态生成XML数据来产生web chart的工具。

3、 Flotr是一个基于Prototype开发的javascript绘图工具。支持图例，鼠标跟踪，图片区域选择，图片缩放，添加事件钩子（event hook），通过CSS设置样式等。

4、FusionCharts Free是一个制图组件用于创建好看，数据驱动，拥有动画效果的Flash charts。它能够与PHP、Python、Ruby on Rails、ASP、http://ASP.NET、JSP、ColdFusion、HTML页面等一起使用。这个组件是FusionCharts的免费版，但功能仍然很强大。

用 <canvas ....>

例如：<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3"></canvas>

然后用 javascript 在里面按数据比例，画矩形柱状块。写字。例如：

<script>

window.onload = function() {

var canvas = document.getElementById("myCanvas")//找到画布

var ctx = canvas.getContext("2d")//获得 built-in HTML obj

ctx.fillStyle = "#FF0000"//设颜色

ctx.fillRect(x1,y1,w1,h1)//画数据1柱状条

照猫画虎，画别的条。也可用数组，循环画条。

ctx.font = "30px Arial"//字体

ctx.fillText("my data 1", xx1,yy1)// 写什么东西，位置

照猫画虎，写字，也可以用数组 也可以 调ctx.的函数，画坐标 ...

}

</script>

旧浏览器如ie，可以用php的gd库直接绘制这样的一幅png图。

现在的新浏览器也可以php输出数据,填给js，由js在浏览器的html5 canvas绘出这样的图。走势就是连接数据点画直线。

const ctx = canvas.getContext('2d')//获得画布

ctx.lineWidth = 5//设线宽

ctx.moveTo(50, 140)//线条起点

ctx.lineTo(150, 60)//线条终点

---