<!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. php操作Mysql 以及封装常用的函数 用外连接连接3个表的案例

    <?php header("content-type;text/html;charset=utf-8"); //数据库连接define('DB_HOST','localhos ...

  2. W3cshool之JavaScript基础

        1.  JavaScript 对大小写敏感 名为 "myfunction"的函数和名为 "myFunction" 的函数是两个不同的函数,同样,变量 & ...

  3. C#窗体WinForm 文件操作

    文件及文件夹操作 C/S:WinForm可以操作客户端文件 Client ServerB/S:浏览器服务 Brower Server 命名空间:using system .IO; 1. File类:文 ...

  4. 《zw版·Halcon-delphi系列原创教程》 Halcon分类函数007, match，图像匹配

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

  5. bitcask

    Bitcask模型是一种日志型kv模型.所谓日志型,是指它不直接支持随机写入,而是像日志一样支持追加操作.Bitcask模型将随机写入转化为顺序写入. 任意时刻,系统中只有一个数据文件支持写入,称为a ...

  6. 【群论】polya定理

    对Polya定理的个人认识     我们先来看一道经典题目:     He's Circles(SGU 294)         有一个长度为N的环,上面写着“X”和“E”,问本质不同的环有多少个(不 ...

  7. 点击checkbox，触发事件

    时间选择: 起始时间:<input type="text" value="2016-03-21 12:24:10" id="starttime& ...

  8. jquery easyui 解析数据库返回的数据

  9. WIFI驱动的移植 realtek 8188

    一般我们拿到的android源代码中wifi应用层部分是好的, 主要是wifi芯片的驱动要移植并添加进去. wifi驱动的移植, 以realtek的8188etv为例到官网下载相应的驱动, 解压后可以 ...

  10. sql按时间段汇总

    select dateadd(mi,(datediff(mi,convert(varchar(10),dateadd(ss,-1,CreateOn),120),dateadd(ss,-1,Create ...