<!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. R数据实战vehicles--1

    新建项目vehicles-project 数据文件vehicles.csv与varlabels.txt放在项目文件中

  2. Form 数据库的顺序

    form buidler 中数据库的上下排列顺序也很重要,开发中无心把LINE的数据块放在HEADER数据块之上, 导致在新增数据的时候先去insert  LINE数据块(没有生成HEADER_ID的 ...

  3. AJAX-----10iframe模拟ajax文件上传效果原理2

    在实际开发中其实我们可以给用户一些提示,比如上传成功或者上传失败,废话不多说,走码: <!DOCTYPE html> <html lang="en"> &l ...

  4. 记录archlinux中安装pcl的大致流程

    贴一下pcl在github上的网址: https://github.com/PointCloudLibrary/pcl/ 从这个网址出发,一般能找到安装的 tutorial.以下只说一下在archli ...

  5. MySql5.7.12设置log-bin

    什么是binlog日志 binlog日志记录了MySql数据库的增加.删除.修改操作.用来实现MySql主从复制. 设置binlog日志 在my.cnf中配置binlog日志 [mysqld] log ...

  6. org.eclipse.jdi.TimeoutException: Timeout occurred while waiting for packet 421. occured resuming VM.

    环境: 导入excel的时候,会根据路径,读取EXCEL的数据. 原因: 电脑上的防火墙关闭

  7. 导入maven工程遇见的问题【问题】

    原工程是一个基于websocket的maven工程(源工程:http://www.cnblogs.com/xdp-gacl/p/5193279.html),把工程导入eclipse后报错.

  8. Web服务端软件的服务品质概要

    软件品质概述 提供同样功能.产品和服务的服务者中, 竞争力来自功能的多样化和服务品质的差异化, 无论是个体.企业还是国家. 这里的服务指功能.产品的实现程度和处理能力,以及研发/客服提供的技术支持程度 ...

  9. Linux中/proc目录下文件详解

    转载于:http://blog.chinaunix.net/uid-10449864-id-2956854.html Linux中/proc目录下文件详解(一)/proc文件系统下的多种文件提供的系统 ...

  10. jQuery 遍历(上)

    目录: 一:定义二:遍历 DOM三:jQuery 参考手册 - 遍历 定义:什么是遍历?jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找" ...