关于web图表制作的方法有很多种，大家可以去网上这里我就介绍我经常使用的一种方法CanvasJS，这也是一款非常容易掌握并且好用的一种方法。

首先可以去网上下载canvasjs.js插件。下载路径：http://canvasjs.com/assets/script/canvasjs.min.js

1：关于折线图制作方法：

前台代码如下：

 <script type="text/javascript">

window.onload=function(){

    var play=new CanvasJS.Chart('play1',{

        title:{

            text:'Line Chart'

        },

        axisX:{

            interval: 10

        },

        data:[{

            type:'line',

            dataPoints:[{

                x:10,y:10

            },

                { x: 20, y: 14 },

                { x: 30, y: 20 },

                { x: 40, y: 60 },

                { x: 50, y: 50 },

                { x: 60, y: 80 },

                { x: 70, y: 40 },

                { x: 80, y: 60 },

                { x: 90, y: 10 },

                { x: 100, y: 50 },

                { x: 110, y: 40 },

                { x: 120, y: 14 },

                { x: 130, y: 70 },

                { x: 140, y: 40 },

                { x: 150, y: 90 },

            ]

        }]

    });

    play.render();

}

    </script>

<script src="../../canvasjs.min.js"></script>

</head>

<body>

<div id="play1" style="width: 500px;height: 500px;;">

</div>

效果图如下：

web前段canvasjs图表制作一的更多相关文章

  1. JQuery WEB前段开发

    JQuery WEB前段开发 Jquery是继prototype之后又一个优秀的Javascript框架.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, S ...

  2. silverlight visifire控件图表制作——silverlight 后台方法页面事件

    1.返回事件 (1.返回silverlight页面,2.返回web页面) private void button_ClickBack(object sender, RoutedEventArgs e) ...

  3. Android 工程师如何快速学会web前段

    Android 工程师如何快速学会web前段 今天主要聊一下本人最近在学习web前段的感受,最近html5是越来越火了,前段时间公司做了一个项目然后让我们“android”的程序猿过去帮忙把客户 端框 ...

  4. ArcGIS Portal 10.4 本地坐标系的web 3d地形展示制作说明

    原文:ArcGIS Portal 10.4 本地坐标系的web 3d地形展示制作说明 ArcGIS Portal 10.4 本地坐标系的web 3d地形展示制作说明 By 李远祥 ArcGIS Por ...

  5. silverlight visifire控件图表制作——silverlight 后台方法ControlChart.xaml.cs

    一.构造方法ControlChart 1.前台页面控件赋值 //时间下拉框赋值,下拉框赋选定值                for (int ii = DateTime.Today.Year; ii ...

  6. 【转】Django 图表制作（By Highcharts）

    马克,待不时之需 Django 图表制作(By Highcharts):https://blog.csdn.net/Temanm/article/details/54141759 免费而优秀的图表JS ...

  7. 最近一直是web前段，没什么意思，所以就不发资料了

    最近一直是web前段,没什么意思,所以就不发资料了 版权声明:本文为博主原创文章,未经博主允许不得转载.

  8. ASP.NET(Web Form)绘制图表 -- Google Chart 三部曲

    ASP.NET(Web Form)绘制图表 -- Google Chart 三部曲 ASP.NET(Web Form)绘制图表 -- Google Chart 三部曲 1.  网页绘制图表 Googl ...

  9. 个人永久性免费-Excel催化剂功能第77波-专业图表制作辅助之批量维护序列点颜色及数据标签

    2018年最后一天工作日完成第77波,7是代表完美,2个7,双重的完美,Excel催化剂的2018年从始至终共77波都充满着完美接近极致的功能体验.感谢各位一路相随,陪伴成长.最后一波,再次让数据分析 ...

随机推荐

  1. OpenXml SDK学习笔记（4）：设置文件级别的样式

    观察上一段日记最后的代码: 这里的样式基本可以理解为行内CSS.那么既然有行内的样式,就肯定有外部的样式.那这部分就对应笔记1里说的style.xml文件.这个文件对应的是Document.MainD ...

  2. ES访问遇到sun.security.validator.ValidatorException: PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested target

    cmd命令cd到jre/bin目录下 输入命令keytool -import -alias 别名 -keystore cacerts -file ‪C://certs//elasticsearch// ...

  3. vscode 导入第三方jar包（添加外部JAR）

    添加 jar包 至根目录下lib文件夹,在 .classpath 文件内添加 jar 路径. 注意:新添加的 jar路径 在"src"和"bin"之间,否则无法 ...

  4. rz安装

    rpm -ivh http://www.rpmfind.net/linux/centos/6.10/os/x86_64/Packages/lrzsz-0.12.20-27.1.el6.x86_64.r ...

  5. 使用jiava打印一个三角形

    public class ForDemo { public static void main(String[] args) { /* 打印一个5行高的三角形,首先将三角形分成三部分: 第一部分是前面的 ...

  6. [atARC096F]Sweet Alchemy

    给定一棵有根树,记$f_{i}$表示$i$的父亲,每一个点有一个代价$c_{i}$ 给定常数$D$和$X$,再给每个点赋一个权值$v_{i}$($v_{i}\ge 0$),满足以下条件下最大化$\su ...

  7. 华为9.8笔试题C++

    问题 给出一颗二叉树,每个节点有一个编号和一个值,该值可能为负数,请你找出一个最优节点(除根节点外),使得在该节点将树分成两棵树后(原来的树移除这个节点及其子节点,新的树以该节点为根节点),分成的两棵 ...

  8. lilypond和弦及其转位的表示

    在lilypond,如果要打和弦的话,有所谓的chordmode,命令就是\chordmode {} 要使用chordmode需要一些基本的和弦命名的知识,最好先补一下乐理 实际上lilypond的官 ...

  9. LOJ 3399 -「2020-2021 集训队作业」Communication Network（推式子+组合意义+树形 DP）

    题面传送门 一道推式子题. 首先列出柿子,\(ans=\sum\limits_{T_2}|T_1\cap T_2|·2^{T_1\cap T_2}\) 这个东西没法直接处理,不过注意到有一个柿子 \( ...

  10. Codeforces 571E - Geometric Progressions（数论+阿巴细节题）

    Codeforces 题目传送门 & 洛谷题目传送门 u1s1 感觉此题思维难度不太大,不过大概是细节多得到了精神污染的地步所以才放到 D1E 的罢((( 首先我们对所有 \(a_i,b_i\ ...