<!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. 修改git commit默认触发的编辑器

    使用git commit会自动启动编辑器编辑本次提交的comment,git默认配置是GNU nano,但是很多人不是很熟悉(我就是),其实这个是可以自行配置的. 编辑制定代码库的.git/confi ...

  2. LATEX论文排版学习资源汇总

    一.国内出版的LaTeX书籍 不管是ctex还是chinatex论坛,很多TeX前辈和使用者都给大家提供了很多咨询帮助,同时,也分享了很多很多学习上的方法与技巧.一般都推荐入门的用户先阅读一本入门书, ...

  3. svg学习（三）rect

    <rect> 标签 <rect> 标签可用来创建矩形,以及矩形的变种. 要理解它的工作原理,请把这些代码拷贝到记事本,然后保存为 "rect1.svg" 文 ...

  4. Groovy学习笔记（一）

    1.1 安装Groovy Groovy主页:http://www.groovy-lang.org 确保本地系统安装了Java 1.1.1 在Windows系统上安装Groovy 1.创建环境变量GRO ...

  5. paper 105： 《Single Image Haze Removal Using Dark Channel Prior》一文中图像去雾算法的原理、实现、效果及其他

    在图像去雾这个领域,几乎没有人不知道<Single Image Haze Removal Using Dark Channel Prior>这篇文章,该文是2009年CVPR最佳论文.作者 ...

  6. MVC返回JSON数据格式书写方式

    返回json数据格式,多个返回值加,隔开 [Route("api/users/web")] //如果不加这个路由请这样调用:/api/users/web?schoolname=十五 ...

  7. oracle 面试题

    1.对数据库SQL2005.ORACLE熟悉吗?   SQL2005是微软公司的数据库产品.是一个RDBMS数据库,一般应用在一些中型数据库的应用,不能跨平台.   ORACLE是ORACLE公司的数 ...

  8. TextToSpeech之阅读文字

    创建阅读类 /** * Created by RongGuang on 2014-11-21. * 中文朗读 */ public class ChineseToSpeech { private Tex ...

  9. transition、animation在macbook air上图片动画边缘抖动

    示例: BUG描述: 最近同事一项目中,产品提出在macbook air上,列表图片放大效果边缘出现抖动现象.在retina屏上没有此问题. 调试过程: 1.单独把结构分离.确定是否由其他元素引起. ...

  10. 使用 Centos 7 的 systemctl 管理服务

    CentOS 7的服务systemctl脚本存放在:/usr/lib/systemd/,有系统(system)和用户(user)之分,像需要开机不登陆就能运行的程序,存系统服务里即:/usr/lib/ ...