JS插件实现图表显示（曲线图表、柱形图表、饼状图表）

最新推荐文章于 2024-06-20 22:53:58 发布
最新推荐文章于 2024-06-20 22:53:58 发布
阅读量7k 收藏 5
点赞数 1
分类专栏： 前后端：图、表

先看效果图：


代码如下:

[html] view plain copy
print ?
  1. <span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>图表统计</title>  
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  6. <script type="text/javascript" src="JS/jquery.js"></script>  
  7. <script type="text/javascript" src="highcharts/highcharts.js"></script>  
  8. <script type="text/javascript">  
  9.         var chart;  
  10.         $(document).ready(function () {  
  11.             //曲线图初始化  
  12.             chart = new Highcharts.Chart({  
  13.                 chart: {  
  14.                     renderTo: 'container1',  
  15.                     type: 'line',  
  16.                     marginRight: 220,  
  17.                     marginBottom: 25  
  18.                 },  
  19.                 title: {  
  20.                     text: '数据曲线图表',  
  21.                     x: -20 //center  
  22.                 },  
  23.                 subtitle: {  
  24.                     text: 'jqddsjfx',  
  25.                     x: -20  
  26.                 },  
  27.                 xAxis: {  
  28.                     categories: ['02年', '02年', '02年', '04年', '05年', '06年',  
  29.                 '07年', '08年', '09年', '20年', '22年', '22年']  
  30.                 },  
  31.                 yAxis: {  
  32.                     title: {  
  33.                         text: '数据'  
  34.                     },  
  35.                     plotLines: [{  
  36.                         value: 0,  
  37.                         width: 2,  
  38.                         color: '#808080'  
  39.                     }]  
  40.                 },  
  41.                 tooltip: {  
  42.                     formatter: function () {  
  43.                         return '<b>' + this.series.name + '</b><br/><br/>' +  
  44.                     this.x + ': ' + this.y + '单位';  
  45.                     }  
  46.                 },  
  47.                 legend: {  
  48.                     layout: 'vertical',  
  49.                     align: 'right',  
  50.                     verticalAlign: 'top',  
  51.                     x: -20,  
  52.                     y: 200,  
  53.                     borderWidth: 0  
  54.                 },  
  55.                 series: [{  
  56.                     name: '用户1',  
  57.                     data: [22, 22, 95, 245, 282, 225, 252, 265, 222, 282, 229, 96]  
  58.                 }, {  
  59.                     name: '用户2',  
  60.                     data: [02, 08, 57, 222, 270, 220, 248, 242, 202, 242, 86, 25]  
  61.                 }, {  
  62.                     name: '用户3',  
  63.                     data: [9, 06, 25, 84, 225, 270, 286, 279, 242, 90, 29, 20]  
  64.                 }, {  
  65.                     name: '用户4',  
  66.                     data: [29, 42, 57, 85, 229, 252, 270, 266, 242, 202, 66, 48]  
  67.                 }]  
  68.             });  
  69.   
  70.             //柱形图初始化  
  71.             chart = new Highcharts.Chart({  
  72.                 chart: {  
  73.                     renderTo: 'container2',  
  74.                     type: 'column'  
  75.                 },  
  76.                 title: {  
  77.                     text: '数据柱形图表'  
  78.                 },  
  79.                 subtitle: {  
  80.                     text: 'jqddsjfx'  
  81.                 },  
  82.                 xAxis: {  
  83.                     categories: [  
  84.                 '01年',  
  85.                 '02年',  
  86.                 '03年',  
  87.                 '04年',  
  88.                 '05年',  
  89.                 '06年',  
  90.                 '07年',  
  91.                 '08年',  
  92.                 '09年',  
  93.                 '10年',  
  94.                 '11年',  
  95.                 '12年'  
  96.             ]  
  97.                 },  
  98.                 yAxis: {  
  99.                     min: 0,  
  100.                     title: {  
  101.                         text: '数据'  
  102.                     }  
  103.                 },  
  104.                 legend: {  
  105.                     layout: 'vertical',  
  106.                     backgroundColor: '#FFFFFF',  
  107.                     align: 'left',  
  108.                     verticalAlign: 'top',  
  109.                     x: 100,  
  110.                     y: 70,  
  111.                     floating: true,  
  112.                     shadow: true  
  113.                 },  
  114.                 tooltip: {  
  115.                     formatter: function () {  
  116.                         return '' +  
  117.                     this.x + ': ' + this.y + ' 单位';  
  118.                     }  
  119.                 },  
  120.                 plotOptions: {  
  121.                     column: {  
  122.                         pointPadding: 0.2,  
  123.                         borderWidth: 0  
  124.                     }  
  125.                 },  
  126.                 series: [{  
  127.                     name: '用户1',  
  128.                     data: [499, 715, 1064, 1292, 1440, 1760, 1356, 1485, 2164, 1941, 956, 544]  
  129.   
  130.                 }, {  
  131.                     name: '用户2',  
  132.                     data: [836, 788, 985, 934, 1060, 845, 1050, 1043, 912, 835, 1066, 923]  
  133.   
  134.                 }, {  
  135.                     name: '用户3',  
  136.                     data: [489, 388, 393, 414, 470, 483, 590, 596, 524, 652, 593, 512]  
  137.   
  138.                 }, {  
  139.                     name: '用户4',  
  140.                     data: [424, 332, 345, 397, 526, 755, 574, 604, 476, 391, 468, 511]  
  141.   
  142.                 }]  
  143.             });  
  144.   
  145.         //饼状图初始化  
  146.         chart = new Highcharts.Chart({  
  147.             chart: {  
  148.                 renderTo: 'container3',  
  149.                 plotBackgroundColor: null,  
  150.                 plotBorderWidth: null,  
  151.                 plotShadow: false  
  152.             },  
  153.             title: {  
  154.                 text: '数据饼状图表'  
  155.             },  
  156.             tooltip: {  
  157.                 formatter: function () {  
  158.                     return '<b>' + this.point.name + '</b>: ' + this.percentage.toFixed(2) + ' %';  
  159.                 }  
  160.             },  
  161.             plotOptions: {  
  162.                 pie: {  
  163.                     allowPointSelect: true,  
  164.                     cursor: 'pointer',  
  165.                     dataLabels: {  
  166.                         enabled: true,  
  167.                         color: '#000000',  
  168.                         connectorColor: '#000000',  
  169.                         formatter: function () {  
  170.                             return '<b>' + this.point.name + '</b>: ' + this.percentage.toFixed(2) + ' %';  
  171.                         }  
  172.                     }  
  173.                 }  
  174.             },  
  175.             series: [{  
  176.                 type: 'pie',  
  177.                 name: 'pie',  
  178.                 data: [  
  179.                 ['圆通快递', 55.0],  
  180.                 ['中通快递', 26.8],  
  181.                 {  
  182.                     name: 'EMS',  
  183.                     y: 12.8,  
  184.                     sliced: true,  
  185.                     selected: true  
  186.                 },  
  187.                 ['申通快递', 7.5]  
  188.             ]  
  189.             }]  
  190.         });  
  191.     });  
  192. </script>  
  193. </head>  
  194. <body>  
  195. <div style="margin: 0 2em">  
  196.         <div id="container1" style="min-width: 400px; height: 400px; margin: 0 auto"></div><br />  
  197.         <div id="container2" style="min-width: 400px; height: 400px; margin: 0 auto"></div><br />  
  198.         <div id="container3" style="min-width: 400px; height: 400px; margin: 0 auto"></div>  
  199.     </div>  
  200. </body>  
  201. </html></span>  
文斌a
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
JavaScript实现柱状图
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-31 198
JavaScript实现柱状图
浅谈JavaScript DOM绘制柱状图
筱葭的博客
12-27 1043
JavaScript DOM绘制柱状图 #chart-wrap{ width:910px; height:240px; border:solid 1px #B3B3DC; position:relative; top:40px; left:20px; } function renderCha
html做一个画柱形图的软件
最新发布
weixin_47634487的博客
06-20 1042
你可以使用 HTML、CSS 和 JavaScript 创建一个简单的柱形图绘制软件。为了方便起见，我们可以使用一个流行的 JavaScript 图表库，比如 Chart.js，它能够简化创建和操作图表的过程。以下是一个完整的示例，展示如何使用 HTML 和 Chart.js 创建一个柱形图绘制工具。
在html中使用Echarts.js绘制柱状图
weixin_45092437的博客
11-29 3704
1. 横坐标为作业名称，作业名称一行6个字符，最多两行，超出显示省略号。 2. 纵坐标为百分比数字，分为5个刻度，且每个刻度在坐标系中都有延伸虚线。 3. 柱状图默认为半透明的蓝色，鼠标hover之后变色，并以浮窗的形式展示该条数据的相关信息。 4. 当数据量超过10条时，x轴下面有横向滚动条，默认每屏展示10条数据，数据之间的间距相等，可以通过滚动条来滚动查看前后的数据。
原生JS-根据数据生成柱形图
随心所欲的便笺
03-29 2435
需求： 用户输入四个季度的数据，可以生成柱形图。 效果图 分析 需要输入4次，所以可以把4个数据放到一个数组里面 利用循环，弹出4次框，同时存到数组里面 使用 var div1 = document.getElementById('one'); 得到第一个div的id名 one。 3. 使用 div1.style.height = `${Data[0]}px` 给类名为 one 的div添加高度。 4. div1.innerHTML = Data[0] + '<br>' +
js数据图表显示
莫莫的家
07-13 423
自己有些的demo； 下载地址如下
曲线图chart.js插件例子
ICode联盟
09-04 253
下载地址chart.js简单的曲线图调用示例，这个是红蓝两条曲线统计图表插件。chart.js是一款很强大的图表插件，有各种各样的统计图表。 dd:
highcharts.js实现曲线图、柱状图等
J_W_Xie
02-18 3565
最近都在做数据的图标显示，使用的是highcharts.js插件，现在来记录一下，以免后期久了没用又忘记了；下面先添加两个链接： highcharts.js的API：https://api.hcharts.cn/highcharts highcharts.js的使用 教程：https://www.evget.com/article/2014/8/27/21514.html 1、实现一条曲
prototype.js网页画线画曲线图插件.rar
07-10
一款基于prototype.js的网页画线插件，画曲线图插件，使用本插件可在网页上生成虚线、物理抛物线、正弦波曲线，数字信息曲线等各种线形。本开源包中仅包括插件代码，不带有示例，需要的可参考官方 网站的调用例子。
cubic-1.1.min.js三维饼图和三维柱形图插件
03-15
echarts没有三维饼图，但是有时候又需要在前端绘制三维饼图怎么办？这个时候可以考虑用threejs来实现功能。 三维饼图使用示例： var cubic = new Cubic.PieChart("WebGL-output", { width: 400, height: 300, thickness: 5,//厚度 radius: 30,//半径 colors: [0xffffff, 0xff00ff, 0xffff00, 0x0000ff,0x5F9EA0,0x00FF7F],//颜色数组16进制的数组 data: [12, 13, 5, 50, 23, 54],//数据数组 startAngle: 0,//起始角 background: 0x00ffff,//背景色，16进制数字 opacity: 1, //背景透明度 camera: "perspective" //相机类型，透视投影摄像机('perspective)、正交投影摄像机('orthographic') }); console.log(cubic.getPosition()); console.log(cubic.getRotation()); // cubic.setPosition(0, 20, 0); // cubic.setRotation(0, 0, 0); // cubic.remove(); 三维柱形图使用示例： var cubic = new Cubic.CylinderChart("WebGL-output", { width: 400, height: 300, thickness: 60,//厚度 radius: 15,//半径 rate: 0.4,//百分比 background: 0x00ffff,//背景色，16进制数字 opacity: 1, //背景透明度 topColor: 0x555555,//上部颜色 bottomColor: 0xCC0000,//下部颜色 topOpacity: 0.5,//上部透明度 bottomOpacity: 1,//下部透明度 camera: "orthographic" //相机类型，透视投影摄像机('perspective)、正交投影摄像机('orthographic') }); // cubic.remove();
一款好用的做柱形图饼状图曲线图等数据统计图形的网页js插件
08-10
带有样例，调用方便，清晰明了；图形美观大方，基于js，无开发语言限制，一款不错的数据呈现插件。
Chartjs曲线图、柱状图、饼状图等多种统计图
11-08
Chartjs曲线图、柱状图、饼状图等多种统计图 Chartjs曲线图、柱状图、饼状图等多种统计图 Chartjs曲线图、柱状图、饼状图等多种统计图
JavaScript实现的DOM绘制柱状图效果示例|angluo-javascript-236773.pdf
10-18
主要介绍了JavaScript实现的DOM绘制柱状图效果,涉及javascript数值计算及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip
12-10
使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js...
折线图、曲线图、饼状图、柱形图Qchart实现，动态刷新，支持图表缩放、移动
03-03
折线图、曲线图、饼状图、柱形图Qchart实现，动态刷新，支持图表缩放、移动
flash js 曲线图+饼状图+柱状图绚丽插件
09-23
本文将深入探讨“flash js 曲线图+饼状图+柱状图绚丽插件”这一主题，这是一组用于创建动态、交互式数据可视化的工具。 首先，让我们关注“曲线图”。曲线图，也称为折线图，是一种表示数值数据趋势的有效方式。在...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值