关于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. IDEA maven Run Maven 启动方式

    首先想要使用 Run Maven 启动需要在IDEA设置里找到plugins  在plugins窗口下面找到Browse Repositories   打开Browse Repositories 下载 ...

  2. xpath的chrome插件安装，xpath基本语法

    xpath插件安装: 注意:提前安装xpath插件 (1)打开chrome浏览器 (2)点击右上角小圆点 (3)更多工具 (4)扩展程序 (5)拖拽xpath插件到扩展程序中 (6)如果crx文件失效 ...

  3. webpack--初试webpack( 核心、体验、资源打包)

    前言 webpack是当前前端项目中最常用的资源构建工具,从本文开始,来总结记录一下关于webpack的学习. 正文 1.webpack简介 webpack官网(https://webpack.doc ...

  4. Android系统编程入门系列之硬件交互——传感器

    到目前为止,关于应用程序与用户之间的相关内容便比较肤浅的大致介绍完毕.而在整个系统架构中,应用程序与用户之间的交互,犹如参天大树上的枝干和树叶,交互起来五彩缤纷,但使整个生态系统保持生命力的核心,在于 ...

  5. 时间处理，类似"xxxx-xx-xxTxx:xx:xx187+0000"格式

    后端返回的时间:"2020-04-24T09:12:51.187+0000" 目标显示时间:2020-04-24   09:12:51 <!DOCTYPE html> ...

  6. [atARC111F]Do you like query problems

    (以下修改指1和2类操作,询问指3类操作,操作指修改或询问) 注意到总方案数确定,那么不妨求出答案的期望,再乘上方案数即为答案 (这里从期望的角度考虑只是为了描述方便,并没有太大的实际意义) 设$E( ...

  7. [luogu5666]树的重心

    考虑枚举一个点k,求其为重心的方案数暴力的做法是,将其作为根搜索,设最大子树大小为s1,次大为s2,对割掉的子树分类讨论:1.在子树中,分两种情况(都可以用线段树合并来做) (1)从s1中切掉一棵大小 ...

  8. 《HelloGitHub》第 68 期

    兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 HelloGitHub 分享 GitHub 上有趣.入门级的开源项目. https://github.com/521xueweiha ...

  9. 【Tool】MySQL卸载

    MySQL卸载 2019-11-07  13:23:00  by冲冲 1.停止MySQL服务 右击"计算机" -- "管理" -- 左击"服务和应用程 ...

  10. idea提交代码好习惯-代码格式化

    提交代码的时候,勾选这个可以格式化提交的代码,非常好! reformat code