<!doctype html>

<html>

<head>

    <title>Line Chart</title>

    <script src="JS/Chart.min.js"></script>

</head>

<body>

    <div>

        <canvas id="canvas"></canvas>

    </div>

    <script>

        var randomScalingFactor = function () { return Math.round(Math.random() * 100) };

        var lineChartData = {

            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],

            datasets: [

                {

                    label: "My Second dataset",

                    fillColor: "rgba(151,187,205,0.2)",

                    strokeColor: "rgba(151,187,205,1)",

                    pointColor: "rgba(151,187,205,1)",

                    pointStrokeColor: "#fff",

                    pointHighlightFill: "#fff",

                    pointHighlightStroke: "rgba(151,187,205,1)",

                    data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]

                }

            ]

        }

        window.onload = function () {

            var ctx = document.getElementById("canvas").getContext("2d");

            window.myLine = new Chart(ctx).Line(lineChartData, {

                responsive: true

            });

        }

    </script>

</body>

</html>

注意：数据源labels和data是数组，不能拼接成一个字符串放进去，没效果。

Chart有六种样式可供选择，效果挺好的。此外，还可以考虑用HighCharts和ECharts实现图表展示。

Bootstrap自带的chart插件的更多相关文章

  1. Bootstrap自带的那些常用插件

    1.Bootstrap自带的那些常用插件. 1.1模态框 模态框的HTML代码放置的位置 务必将模态框的HTML代码放在文档的最高层级内(也就是说,尽量作为 body 标签的直接子元素),以避免其他组 ...

  2. 自己写的基于bootstrap风格的弹框插件

    自己写的一款基于bootstrap风格的弹框插件,暂时只有确认框.提示框.后续功能扩展.bug修改再更新. ;(function($){ //默认参数 var PARAMS; var DEFAULTP ...

  3. angularjs封装bootstrap官网的时间插件datetimepicker

    背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经 ...

  4. 让hadoop-0.20.2自带的eclipse插件支持eclipse-3.5以上

    hadoop-0.20.2自带的eclipse插件是不支持eclipse-3.5以上的,要想让它支持3.5以上就必须重新编译eclipse插件. 首先先修改  hadoop-0.20.2\src\co ...

  5. jQuery 使用 jQuery UI 部件工厂编写带状态的插件（翻译）

    首先,我们要创建一个progress bar,它只允许我们简单的设置进度值.正如我们接下来将要看到的,我们需要通过调用 jQuery.widget 及其两个参数来实现这一操作,这两个参数分别是:将要创 ...

  6. c# 通过.net自带的chart控件绘制饼图pie chart

    c# 通过.net自带的chart控件绘制饼图pie chart   需要实现的目标是: 1.将数据绑定到pie的后台数据中,自动生成饼图. 2.生成的饼图有详细文字的说明. 具体的实现步骤: > ...

  7. 第二百四十五节，Bootstrap标签页和工具提示插件

    Bootstrap标签页和工具提示插件 学习要点: 1.标签页 2.工具提示 本节课我们主要学习一下 Bootstrap 中的标签页和工具提示插件. 一．标签页选项卡 标签页也就是通常所说的选项卡功能 ...

  8. 使用Eclipse自带的Maven插件创建Web项目时报错：

    问题描述: 使用Eclipse自带的Maven插件创建Web项目时报错: Could not resolve archetype org.apache.maven.archetypes:maven-a ...

  9. Bootstrap历练实例：popover插件中的方法

    方法 下面是一些弹出框(Popover)插件中有用的方法: 方法 描述 实例 Options: .popover(options) 向元素集合附加弹出框句柄. $().popover(options) ...

随机推荐

  1. Velocity(8)——引入指令和#Stop指令

    #Include和#Parse都是用于将本地文件引入当前文件的指令,而且被引入的文件必须位于TEMPLATE_ROOT.这两者之间有一些区别. #Include 被#Include引入的文件,其内容不 ...

  2. c++获取系统时间（引用别人的博文）

    //方案— 优点:仅使用C标准库:缺点:只能精确到秒级#include <time.h> #include <stdio.h> int main( void ) {     t ...

  3. C++之路进阶——bzoj2879（美食节）

    2879: [Noi2012]美食节 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 1304  Solved: 702[Submit][Status] ...

  4. Timing path

    Timing path:从register clock/input port开始,经过一些combinational logic,终止在register data/output port. PT以pa ...

  5. JSP-14- 常用集合类和接口

    List接口 List接口与实现类是容量可变的列表,可按索引访问集合中的元素,是有序的集合. Arraylist是以 array方式实现的List,允许快速随机存取,相当于LinkedList 不适合 ...

  6. opencv的学习笔记2

    继续昨晚的学习总结,昨晚看到轨迹条的创建就没有看下去了,今天继续: 1.轨迹条的创建: 轨迹条往往会和一个回调函数配合使用,当轨迹条发生改变,就调用这个轨迹条的回调函数 int createTrack ...

  7. MyEclipse启动慢的办法

    禁用myeclipse updating indexes MyEclipse 总是不停的在 Update index,研究发现Update index...是Maven在下载更新,但很是影响myecl ...

  8. HTML之常用标签

    一.H标签 标题(Heading)是通过<h1>-<h6>等标签进行定义的. <h1>定义最大的标题,<h6>定义最小的标题. 未完待续....

  9. Hudson(Jenkins)持续集成插件开发环境搭建

    Hudson持续集成插件开发环境搭建 第一步安装java jdk,至于版本的话推荐1.6以上吧.安装好jdk设置环境变量,确保你在cmd中输入java -version有提示你jdk的版本信息等,也就 ...

  10. Script 语言的简单练习题 乘法口诀

    <script>for(var i=1;i<=9;i++){ for(var k=1;k<=i;k++) { document.write(k+"x"+i+ ...