JS简单插件（空心饼图）

最新推荐文章于 2023-09-23 21:24:49 发布
最新推荐文章于 2023-09-23 21:24:49 发布
阅读量852 收藏
点赞数
分类专栏： JS 文章标签： 空心饼图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43885459/article/details/85045375
版权

html代码

<body>
<div id="container"></div>
</body>

js代码如下

<script src="../../day08-20181212/html/jrChart.js"></script>
<script>
    var obj = {
        id:"container",
        width:500,
        height:300,
        data:[
            {
                name:"不及格",
                num:4,
                color:"red"
            },
            {
                name:"及格",
                num:13,
                color:"orange"
            },
            {
                name:"良好",
                num:30,
                color:"purple"
            },
            {
                name:"优秀",
                num:2,
                color:"green"
            },
            {
                name:"满分",
                num:1,
                color:"blue"
            }
        ],
        innerR:30,
        outerR:80
    };
    drawPie2(obj);
</script>

引入名叫jrChart的js文件

function drawLineChart(obj) {
    var id = obj.id;
    var options = obj.options;
    var width = obj.width;
    var height = obj.height;
    var startX = obj.startX;
    var startY = obj.startY;
    var labelCount = obj.labelCount;
    var labelColor = obj.labelColor;
    var nameSpace = obj.nameSpace;
    var tip = obj.tip;
    var line = obj.line;
    var container = document.getElementById(id);
    var canvas = document.createElement("canvas");
    container.appendChild(canvas);
    canvas.width = width || 1300;
    canvas.height = height || 500;
    var datas = obj.datas;
    var color = obj.color;
    var circleColor = obj.circleColor;
    var name = obj.name;
    var cvs = canvas.getContext("2d");
    cvs.beginPath();
    cvs.strokeStyle = "white";
    var startY1 = 50;
    cvs.moveTo(startX, startY1);
    cvs.lineTo(startX, startY);
    cvs.lineTo(1200, startY);
    cvs.stroke();
    var maxNum = 0;
    var data = [].concat.apply([], options);//把二维数组变成一维数组
    for (var m = 0; m < datas; m++) {
        if (maxNum <= data[m]) {
            maxNum = data[m];
        }
    }
    maxNum = maxNum * 1.1;
    var increment =  (startY - startY1) / maxNum;
    //y轴
    var labelSpace = (startY - startY1) / labelCount;
    for (var i = 0; i <= labelCount; i++) {
        var text = Math.round((maxNum / labelCount) * i);
        cvs.beginPath();
        cvs.fillStyle = labelColor;
        cvs.fillText(text, startX - 40, startY - (labelSpace * i ) );
        cvs.closePath();
        cvs.fill();
    }

    var start = 0;
    var end = 0;
    var titleSpace = 30;
    for (var i = 0;i < line ;i++){
        for (var j = 0;j < datas;j++){
            end = datas * (i + 1);
            start = i * datas;
            // color[i] = obj.("color" + 'i');


            //折线
            cvs.beginPath();
            cvs.strokeStyle = color[i];
            cvs.moveTo(startX + nameSpace * (j + 1),(startY1 + (maxNum-(data.slice(start,end))[j]) * increment ));
            cvs.lineTo(startX + nameSpace * (j + 2),(startY1 + (maxNum - (data.slice(start,end))[j + 1]) * increment));
            cvs.stroke();

            //圆点
            cvs.beginPath();
            cvs.fillStyle = circleColor;
            cvs.arc(startX + nameSpace * (j + 1),(startY1 + (maxNum-(data.slice(start,end))[j]) * increment ),4,0,Math.PI * 2)
            cvs.closePath();
            cvs.fill();
        }
        //提示
        cvs.beginPath();
        cvs.strokeStyle = color[i];
        cvs.moveTo(1050,40 + titleSpace * i);
        cvs.lineTo(1100,40 + titleSpace * i);
        cvs.stroke();
        cvs.closePath();

        cvs.beginPath();
        cvs.fillStyle = color[i];
        cvs.font = "15px 宋体";
        cvs.fillText(name[i],1130,45 + titleSpace * i);
        cvs.stroke();
        cvs.closePath();


    }
    for(var i = 0; i < datas;i++){
        cvs.beginPath();
        cvs.fillStyle = labelColor;
        cvs.fillText((i + 1) + "月份", startX + nameSpace * (i + 1) - 10, startY + 30 );
        cvs.closePath();
        cvs.fill();
    }
    cvs.beginPath();
    cvs.fillStyle = labelColor;
    cvs.fillText(tip,20,30);
    cvs.closePath();
    cvs.fill();


}
小栗子的普
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript使用百度ECharts插件绘制饼图操作示例
12-14
本文实例讲述了JavaScript使用百度ECharts插件绘制饼图操作。分享给大家供大家参考，具体如下： 百度ECharts是一款由百度前端团队开发与维护的，基于HTML5的开源JavaScript图表库。E是Enterprise的简称，意思是商业...
cocos2dx-3.2(34) DrawNode 绘图API
破茧
09-24 6782
～～～～我的生活，我的点点滴滴！！
EChart创建圆形空心圈饼图
ubuntulinuxjava的专栏
04-29 2087
本文将使用 EChart 创建圆形空心圈饼图。
JavaScript练手小技巧：用Canvas绘制饼图
九天翔龙的技术博客
12-09 931
饼图是数据可视化很重要的一个组成部分。这个案例虽然没有 Echarts 那么好看，但是作为了解Canvas的基础案例，还是很有必要练习下。
JS-ECharts-前端图表 多层级联合饼图、柱状堆叠图、柱/线组合图、趋势图、自定义中线、平均线、气泡备注点
最新发布
君琴 的博客
09-23 2083
JavaScript编码，使用ECharts绘制前端图表：多层级联合饼图、柱状堆叠图、柱/线组合图、趋势图、自定义中线、平均线、气泡备注点、自定义数据分类占比、批注内容等
JS，统计图表大全－－三、饼形图（饼图及环形图）
懒虫的博客
01-22 3404
HTML参考 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"><link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico"> <meta name="...
QT QChart QPieSeries 空心饼图中显示文字
09-13
QT QChart 写的空心饼图，饼图中心显示百分比文字。https://blog.csdn.net/xiezhongyuan07/article/details/82684118
threejs实现三维饼图
05-12
echarts没有三维饼图，但是有时候又需要在前端绘制三维饼图怎么办？这个时候可以考虑用threejs来实现功能。 使用示例： var cubic = new Cubic.PieChart("WebGL-output", { width: 400, height: 300, thickness: ...
前端 threejs 3D饼图 通过一些配置可以实现3D饼图的生成
06-19
通过threejs实现的3D饼图图表，数据可视化的高度应用场景中2D图表居多，3D相关的数据可视化比较少，不知收费贵而且资源少之又少，在项目中需要使用时对于初步接触的开发的人员很不友好，希望大家通过本案例可以快速...
XCharts插件之带标题的环形饼状图，参数配置
qq_41556243的博客
05-30 1534
XCharts之带标题的环形饼状图
JS饼状图效果
11-20
插件描述：基于highcharts.js实现的饼状图效果，报表. 参考示例：http://www.jq22.com/jquery-info4506
js生成饼图
05-09
一个完整的js生成饼图例子
Chart.js-饼状图分析（参数分析+例图）
十一月廿七风雨大作
06-15 1930
Chart.js-饼状图分析（参数分析+例图）饼状图样式总览基本写法参数解析饼状图2 - 中空同心圆饼状图3 - 多同心圆 饼状图样式总览 基本写法 首先在< script >标签里面引入chart.js： <script src="chart.js/Chart.js"></script> 然后创建一个画布： <canvas id="myChart" width="400" height="400"></canvas> 最后写js代码： va
vue饼图组件_Vue插件-饼状图
weixin_39827304的博客
12-19 1324
饼状图插件v-pie效果v-pie.png特性多种样式独立的渲染库独立的动画库轻量级源码，简洁易懂，可根据需求自定义改造参考资料基于charjs库代码裁剪，只保留了pie相关代码渲染库为Crender动画库为transition安装npm install @oldeng/v-pie使用详情参考demo源码//导入饼状图组件import { VPie } from "../../dist/v-pie...
Chart.js 饼图
shengyin714959的博客
09-03 147
饼图，或称饼状图，是一个划分为几个扇形的圆形统计图表，用于描述量、频率或百分比之间的相对关系。在饼图中，每个扇区的弧长（以及圆心角和面积）大小为其所表示的数量的比例。这些扇区合在一起刚好是一个完全的圆形。顾名思义，这些扇区拼成了一个切开的饼形图案。饼图属性为 pie ，type 描述了图表类型。
用原生js手写 canvas饼状图
Jacky的博客
01-08 4673
一、canvas是什么？     百度的定义：Canvas 通过 JavaScript 来绘制 2D图形。Canvas 是逐像素进行渲染的。开发者可以通过javascript脚本实现任意绘图。百度上的定义基本描述的什么是canvas，然而要补充的一点是，canvas现在只能支持2d渲染，它最早是由苹果在webkit的浏览器使用到canvas，由于实用性，逐渐被各个浏览器所支持，二、canvas本...
echarts3d饼图，环形图（包含透明效果）
热门推荐
weixin_41326021的博客
09-09 7万+
先看效果图： 饼图： 环形图： 带透明度的环形图： 安装echarts "echarts":"^5.1.2" "echarts-gl":"^2.0.8" import Vue from 'vue' import * as echarts from 'echarts' import 'echarts-gl' // 3d图表库 Vue.prototype.$echarts = echarts .vue文件 <template> &l...
js饼图
清叶 的专栏
08-30 565
function   table3(total,table_x,table_y,all_width,all_height,table_type)   {   //参数含义(传递的数组，横坐标，纵坐标，图表的宽度，图表的高度,图表的类型)   //生成图表函数3——饼图          var   tmdColor1   =   new   Array();       t
用canvas绘制一个饼状图...
weixin_41871881的博客
09-21 626
Canvas，网页原来是可以画出来的... 认识Canvas Canvas绘制矩形 Canvas绘制圆形 使用moveTo()和lineTo()绘制路径 Canvas绘制一个饼状图   认识Canvas canvas是HTML5中新增的一个元素，专门用来绘制图形。在页面放置一个canvas元素，就相当于放置了一个画布，可以在其中进行图形的绘制。但绘制图形，并不是指使用鼠标作画，而是需...
python空心饼图
09-05
要绘制一个空心饼图，你可以使用 Python 中的 matplotlib 库。下面是一个简单的示例代码： ```python import matplotlib.pyplot as plt # 数据 sizes = [15, 30, 45, 10] labels = ['A', 'B', 'C', 'D'] colors = ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值