chart.js的示例地址 ：
http://www.bootcss.com/p/chart.js/docs/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>线形图</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
</head>
<body>
<canvas id="myChart2" width="300" height="200"></canvas>
<canvas id="myChart" width="300" height="200"></canvas>
</body>
</html>
<script>
var ctx = document.getElementById("myChart").getContext("2d");
var ctx2 = document.getElementById("myChart2").getContext("2d");
var data = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : [65,59,90,81,56,55,40]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [28,48,40,19,96,27,100]
}
]
};
var data2 = [
{
value: 30,
color:"#F38630"
},
{
value : 50,
color : "#E0E4CC"
},
{
value : 100,
color : "#69D2E7"
}
]
//This will get the first returned node in the jQuery collection.
var myNewChart = new Chart(ctx).Bar(data,{});
var myNewChart = new Chart(ctx2).Pie(data2,{});
</script>
运行在这个位置 可以看到效果
http://jsbin.com/noyepipume/edit?html,output
运行效果：
- 大小: 17.5 KB
分享到：
相关推荐
在下载的"饼状图柱状图源码"压缩包中，应包含实现这些功能的具体C#源文件，你可以参考其中的类和方法，进一步学习和自定义图表。通过深入理解这些代码，你可以更好地掌握C#中的数据可视化技术，为你的项目或应用程序...
饼状图、柱状图和折线图是数据可视化中最常见的图表类型，它们各自在特定的场景下有着独特的应用。 首先，饼状图是表示部分与整体之间关系的最佳选择。在饼状图中，整个圆代表整体，各个扇形则代表整体中的各个部分...
本文将详细讲解使用JavaScript实现饼状图、柱状图和曲线图的相关知识点。 首先，饼状图是一种常用于表示部分与整体之间关系的数据图形，每个扇区代表一个类别，其大小与该类别的比例成正比。JavaScript中实现饼状图...
本篇文章将深入探讨如何使用JavaServer Pages (JSP)来生成饼状图和柱状图，这两种是最常见的数据可视化图表。 首先，我们要了解JSP的基础。JSP是一种动态网页技术，它允许我们在HTML页面中嵌入Java代码，从而实现...
在这个场景中，我们关注的是jQuery在报表和图表展示方面的应用，特别是饼状图和柱状图。 首先，jQuery报表通常指的是利用jQuery库来创建数据可视化工具，这些工具可以帮助用户更直观地理解数据。饼状图是一种将数据...
本教程将详细介绍如何使用编程语言（如Python）来读取Excel文件，并利用这些数据生成饼状图、柱状图和折线图，这些都是数据展示的常用图表类型。 首先，我们需要引入Python中的`pandas`库来读取Excel文件。`pandas`...
在数据分析和可视化领域，饼状图、柱状图和线状图是常用的数据展示工具，它们可以帮助我们直观地理解复杂的数据。在这个基于jQuery实现的压缩包中，包含了20多种不同类型的这些图表，使得开发者无需从零开始创建，...
标题中的“js xml flash 饼状图 柱状图大全”暗示了这是一个关于使用JavaScript、XML和Flash技术创建饼状图和柱状图的资源集合。这些图表是数据可视化的重要工具，常用于展示统计数据，使复杂的数据更容易理解。 在...
利用cocos2d-x实现的 饼状图、柱状图、线状图，及拍照 并将照片 传回 cocos2d-x
本资源提供了一套方便使用的控件，包括线形图、饼状图、柱状图以及下拉框多选功能，可以直接通过引用DLL动态链接库来实现。这些控件设计精良，适用于快速构建具有交互性的数据展示界面，对于需要处理大量数据并进行...
在数据分析和可视化领域，柱状图和饼状图是两种常用的数据表示方法。它们各有特点，适用于不同的场景。本文将详细探讨如何将柱状图转换为饼状图，并阐述这两种图表各自的优势和适用情况。 首先，柱状图是一种用于...
Highcharts是一款强大的JavaScript图表库，用于在Web页面上创建各种数据可视化效果，包括饼状图、柱状图和曲线图。这些图表类型是数据分析和展示的常用工具，可以帮助用户直观理解大量复杂数据。 饼状图在数据可视...
饼状图、柱状图和折线图是最常见的数据可视化工具，它们各自适用于不同的数据展示场景。 饼状图通常用于显示各部分占总体的比例关系，每个扇区代表一种类别，面积大小直接反映了各类别的占比。在编程实现时，我们...
本教程将深入探讨如何使用C#生成图标，特别是饼状图、柱状图和折线图，这些都是数据展示的重要工具。 首先，我们要知道C#本身并不直接支持图形绘制，但是可以借助.NET框架中的库来实现，比如System.Windows.Forms....
使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js...
JFreeChart 饼状图 柱状图 柱状图 堆积柱状图 折线图 这个是我特地开发的一个用JFreeChart开发的用来画图的项目，已经开发成形了各种项目的各种需求的项目，并且自己可以拓展，根据需求修改代码，完成项目的需要。 ...
在Java编程语言中，生成数据可视化图形，如饼状图、柱状图和折线图，是数据分析和展示的关键步骤。这些图表可以帮助我们直观地理解数据分布和趋势。本篇文章将详细探讨如何使用Java实现这三种图表。 首先，饼状图...
原生PHP绘制饼状图柱状图和折线图，非常简洁易用。我这内天在做自己的网站，不做点东西的话，也没什么放上面了 （哈哈）于是就花了两天的时候写了这三个统计图类（虽然统计图类已经有了很优秀的类了，但我个人觉得...
这个资源包"安卓折线图，饼状图，柱状图，环形图等图形集合"提供了多种图表类型的实现，包括折线图、饼状图、柱状图和环形图，这些都是数据可视化的常用工具。下面我们将详细探讨这些图形的使用和实现方法。 1. ...
一开始是使用第三方的绘图框架Achartengine来绘制，能实现一大部分的图形。可针对公司产品天马行空的想象显然Achartengine已经不能满足现在的项目...这里给大家带来可点击的饼状图、可点击以及可滑动的柱状图、双折线图