chart.js绘制精美的数据化图形--入门示例

参考：http://think.zvan.com.cn/code/js/2014/0607/247.html

这个库基于html5，在360极速浏览器和firefox中测试通过。

<html><head><meta charset="utf-8"><script type="text/javascript" src="js/chart/Chart.min.js"></script></head><body><canvas id="canvas" height="450" width="600"></canvas><script type="text/javascript">var ctx = new Chart(document.getElementById("canvas").getContext("2d"));var options = {scaleFontSize: 13, scaleFontColor: "#ffa45e"};// 线型图var LineChart = {labels: ["Ruby", "jQuery", "Java", "ASP.Net", "PHP"],datasets: [{fillColor: "rgba(151,249,190,0.5)",strokeColor: "rgba(255,255,255,1)",pointColor: "rgba(220,220,220,1)",pointStrokeColor: "#fff",data: [10, 20, 30, 40, 50]}, {fillColor: "rgba(252,147,65,0.5)",strokeColor: "rgba(255,255,255,1)",pointColor: "rgba(173,173,173,1)",pointStrokeColor: "#fff",data: [28, 68, 40, 19, 96]}]};var myLineChart = ctx.Line(LineChart, options);// 条形图var BarChart = {labels: ["Ruby", "jQuery", "Java", "ASP.Net", "PHP"],datasets: [{fillColor: "rgba(151,249,190,0.5)",strokeColor: "rgba(255,255,255,1)",data: [13, 20, 30, 40, 50]}, {fillColor: "rgba(252,147,65,0.5)",strokeColor: "rgba(255,255,255,1)",data: [28, 68, 40, 19, 96]}]};//var myBarChart = ctx.Bar(BarChart, options);// 饼状图var pieChart = [{value: 40, color: "#fcc79c"},{value: 30, color: "#beefd2"},{value: 90, color: "#ffddfb"},];//var myPieChart = ctx.Pie(pieChart);// 环状图var doughnutChart = [{value: 60, color: "#fcc79e"},{value: 30, color: "#beefd2"},{value: 50, color: "#ffddfb"},{value: 120, color: "#cdecff"},{value: 90, color: "#fff5bc"}];//var myRingChart = ctx.Doughnut(doughnutChart);</script></body>
</html>

保证chart.js的文件路径正确！

chart.js绘制精美的数据化图形--入门示例相关推荐

r语言绘制精美pcoa图_如何绘制精美的PCoA图形？
原标题:如何绘制精美的PCoA图形? 今天我们来分享干货--PCoA图形的代码.继PCA.火山图.热图等代码后,基迪奥的程序猿又整理出PCoA代码.具体往期我们分享过的代码贴,可以在文末查看哦. 什么 ...
如何用python画数学图案_使用Matplotlib 绘制精美的数学图形例子
一个最最简单的例子: 绘制一个从 0 到 360 度完整的 SIN 函数图形 import numpy as np import matplotlib.pyplot as pt x = np.aran ...
用python画数学函数图像教程_使用Matplotlib 绘制精美的数学图形例子
一个最最简单的例子: 绘制一个从 0 到 360 度完整的 SIN 函数图形 import numpy as np import matplotlib.pyplot as pt x = np.aran ...
python画螺旋状图形教程_Python实现的绘制三维双螺旋线图形功能示例
本文实例讲述了Python实现的绘制三维双螺旋线图形功能.分享给大家供大家参考,具体如下: 代码: # -*- coding:utf-8 -*- #! python3 #绘制三维双螺旋线 import ...
r语言做绘制精美pcoa图_如何绘制精美的PCoA图形
匿名用户 1级 2017-06-20 回答虽然一般的16S或者宏基因组等分析e69da5e6ba90e799bee5baa6e79fa5e9819331333363373762流程当中都会包含PCo ...
使用JavaReport制作Web报表与图形入门示例
工作中非常需要根据客户录入的数据在页面上生成一些报表,苦于那个AnyChart是收费的,不敢用,所以就找了个免费的基于Java的第三方报表组件: JavaReport是一款国产的第三方组件, ...
Chart.js入门：简介
人们通常不希望浏览大量以文本或表格形式呈现给他们的数据. 大多数情况下,这是因为它很无聊,但更重要的是,处理原始数字要困难一些. 例如,这是世界上人口最多的十个国家的表格: 国名人口中国 1,37 ...
怎么用python画sin函数图像_Python3使用Matplotlib 绘制精美的数学函数图形
记录Python3使用Matplotlib 绘制精美的数学图形. 一个最最简单的例子: 绘制一个从 0 到 360 度完整的 SIN 函数图形 import numpy as np import ma ...
chart.js报错“Canvas is already in use. Chart ...must be destroyed before the canvas can be reused ”
测试网页中使用jQuery调用webapi获取气泡图数据,并用chart.js绘制气泡图时,如果点击两次显示图表按钮,就会报"Uncaught Error: Canvas is alre ...

chart.js绘制精美的数据化图形--入门示例

chart.js绘制精美的数据化图形--入门示例相关推荐

最新文章

热门文章