<html>
<head>
    <title></title>
</head>
<body>
<div style='width:50%'>
    <canvas id="canvas" width="400" height="400"></canvas>
</div>

<script type="text/javascript" src='Chart.js'></script>
<script type="text/javascript">
//Get the context of the canvas element we want to select
window.onload = function() {
     var ctx = document.getElementById("canvas").getContext("2d");
     ctx.fillRect(10, 10, 20, 20);
     window.myLine = new Chart(ctx).Line(lineChartData, {
        responsive: true
    });
};
//执行随机异步交互
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var lineChartData = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
        {
            label: "My First dataset",
            fillColor : "rgba(220,220,220,0.2)",
            strokeColor : "rgba(220,220,220,1)",
            pointColor : "rgba(220,220,220,1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(220,220,220,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        },

        {

            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()]
        }

    ]
}
</script>
</body>
</html>

chartjs执行图表的更多相关文章

  1. ECharts学习总结(三):ECharts图表对象的初始化(init)详解以及注意事项

    一.相关js文件的引入 这里我们采用标签式引入文件的方式,我们引入两个js文件,一个是esl.js文件和一个echarts.js. <script src="js/esl.js&quo ...

  2. 基于Vue.js的大型报告页项目实现过程及问题总结（二）

    距离上一篇文章过去了二十多天了,期间一直想把第二部分写完,结果在测试过程中遇到了各种坑爹的问题,到今天才算基本完成,也许还有后续,但趁着今天有时间就写出来吧,也算对这个项目的一个总结了 遇到最大问题: ...

  3. Bash 翻译

    Bash参考手册 目录 1简介 1.1什么是Bash? 1.2什么是shell? 2定义 3基本外壳功能 3.1 Shell语法 3.1.1外壳操作 3.1.2报价 3.1.2.1逃逸角色 3.1.2 ...

  4. Tensorflow平台快速搭建：Windows 7+TensorFlow 0.12.0

    Tensorflow平台快速搭建:Windows 7+TensorFlow 0.12.0 1.TensorFlow 0.12.0下载 2016年11月29日,距离TensorFlow 宣布开源刚刚过去 ...

  5. 带有Apache Spark的Lambda架构

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 目标 市场上的许多玩家已经建立了成功的MapReduce工作流程来每天处理以TB计的历史数据.但是谁愿意等待24小时才能获得最新的分析结果? ...

  6. 关于Echarts的使用和遇到的问题

    对于插件工具,感觉按着官方的教程,便可以使用,但是看这个Echarts有点晕乎乎的,还是不能快速的学习啊. 一.在webpack中使用ECharts //通过 npm 获取 echartsnpm in ...

  7. 图表控件的学习===》hightChart 和 Chartjs的使用

    hightChart : 比较旧的图表控件   商业需要授权 Chartjs 免费开源 刚开始使用了下 hightchart 然后参考示例 建了对应的参数配置的类, 也顺利的集合到后台动态传输.  后 ...

  8. js 图表插件 chartjs 2.4

    PS:该图表插件对手机端支持挺好 网上的文章大多数的参数都是老版本的过时的,最新api查看官网http://www.chartjs.org/docs/  下载地址 https://github.com ...

  9. laravel-admin 添加图表 Chartjs

    github地址:https://github.com/laravel-admin-extensions/chartjs Installation composer require laravel-a ...

随机推荐

  1. iOS内存管理

    iOS内存管理的方式是引用计数机制.分为MRC(人式引用计数)和ARC(自动引用计数). 为什么要学习内存管理? 内存管理方式是引用计数机制,通过控制对象的引用计数来实现操作对象的功能.一个对象的生命 ...

  2. python猜数脚本（电脑猜测）（二分法）

    # coding=utf-8# 猜数# 记录猜数的过程import randomcom_result=[]  #存放电脑结果,数组com_count=0 #存放电脑猜测次数ran=random.ran ...

  3. Nodejs学习（四）－ express目录的分析

    好久不来了,最近挺忙,就写一写下目录的情况吧. 我就说主要的目录,也就是我们经常用到的 public  用于存放一些js,css. routes 路由目录,如果你学过MVC应该不默生. views   ...

  4. shell脚本的执行方式

    编写好的shell脚本(如:test),可以采取两种方式进行运行: 一. $ sh test 一般不采用这种调用方式,尤其不采用"sh<test"的调用方式,因为这种方式将禁 ...

  5. Windows下用Python 3.4+自带的venv模块创建虚拟环境

    Python 3.4+自带了venv模块,用于创建虚拟环境,每个虚拟环境都可以安装一套独立的第三方模块. 本文在Windows 10上操作. 1.创建一个虚拟环境: D:\>mkdir test ...

  6. socket-自我总结（2）

    这里总结下一个服务端与多个客户端之间的通信. 先看demo: #/usr/bin/env python #_*_coding:utf-8_*_ __author__ = 'ganzl' import ...

  7. Mac下安装 PIL

     最近入手MacBook Pro 在配置PIL环境的时候遇到一些问题.现在把解决方式记录下来,希望对有需要的有所帮助. 1. 安装brew : brew 又叫Homebrew,是Mac OSX上的软件 ...

  8. SQL数据库 开启时出现 数据库连接错误2，error:40的问题。如何解决

    错误如下:(原因是sql server服务停止) 解决这个问题,就需要启动sql server服务:主要有三种方法: 一.(后台启动服务) 1.开始->控制面板: 2.管理工具 3.服务 4.把 ...

  9. c++ 成员函数

    #include <iostream> #include "Sales_item.h" int main() { Sales_item item1, item2; st ...

  10. 给员工授予svn相关权限

    步骤: 了解:地址2.4是代码svn.地址2.16是文档svn 以授予 SVN地址是:http://172.16.2.16/svn/SystemNetworkBU  权限组为mam_group,是只读 ...