<!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. 20145320 《Java程序设计》第1周学习总结

    20145320 <Java程序设计>第1周学习总结 教材学习内容总结 第一章 Java最早是Sun公司的项目Green Project中编写Star7应用程序的程序语言,1995年5月2 ...

  2. SQL*Plus命令行工具连接Oracle数据库

    1.在命令行中输入"sqlplus /nolog"即可启动该工具. 2.连接到Oracle服务器  conn 用户名/密码@服务器连接字符串 as 连接身份 客户端工具根据&quo ...

  3. sql 遍历结果集

    declare @temp table ( [id] int IDENTITY(1,1), [Name] varchar(10) ) --select * from @temp declare @te ...

  4. MVC @Html.TextBox 添加属性和样式

    1.添加属性:@Html.TextBox("CnAddressmodify","", new { maxlength="90" }) 2.添 ...

  5. 《zw版·Halcon-delphi系列原创教程》 Halcon分类函数013,shape模型

    <zw版·Halcon-delphi系列原创教程> Halcon分类函数013,shape模型 为方便阅读,在不影响说明的前提下,笔者对函数进行了简化: :: 用符号“**”,替换:“pr ...

  6. Json.net对于导航属性的处理（解决对象循环引用）

    对于两张表A.B多对多的关系中,A的导航属性中有B,B的导航属性中有A,这样Json.net对A或者B对象序列化时会形成死循环 所以对于导航属性要加标签 首先在A.B实体类工程(Model)中引用Js ...

  7. datatable-提示

    ｀默认columns配置问题: 记住是columnDefs不是columnsDefs ｀Cannot read property 'sWidth' of undefined: columns的数量和t ...

  8. TCP/IP 协议介绍

    转自http://blog.jobbole.com/104886/ 一.TCP/IP 协议介绍 在介绍 HTTP 协议之前,先简单说一下TCP/IP协议的相关内容.TCP/IP协议是分层的,从底层至应 ...

  9. urllib编码

    python: 1.unquote 2.decode 3.encode

  10. CentOS更新软件

    列出所有可更新的软件清单命令:yum check-update 安装所有更新软件命令:yum update 仅安装指定的软件命令:yum install <package_name> 仅更 ...