js饼状图(带百分比)功能实现,新人必懂

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6     <script src="../../js/my/highcharts.js"></script>
 7     <script src="../../css2/jquery-1.10.2.min.js"></script>
 8 </head>
 9 <body>
10     <div class="piecleft" id="chart" style="height:350px; width: 350px;">
11     </div>
12     <script type="text/javascript" charset="utf-8">
13         $.ajax({
14             url: "/handler/hbtongji.ashx",
15             type: "GET",
16             data: {},
17             success: function (data) {
18
19                 var obj = eval(‘(‘ + data + ‘)‘);
20                 transfer = parseInt(obj["state"][0]["transfer"]);
21                 transferNO = parseInt(obj["state"][1]["transferNO"]);
22                 var dataset = [transfer, transferNO];
23                 var chart;
24                 $(document).ready(function () {
25                     chart = new Highcharts.Chart({
26                         chart: {
27                             renderTo: ‘chart‘
28                         },
29                         title: {
30                             text: ‘划拨土地饼状图统计‘
31                         },
32                         plotArea: {
33                             shadow: null,
34                             borderWidth: null,
35                             backgroundColor: null
36                         },
37                         tooltip: {
38                             formatter: function () {
39                                 return ‘<b>‘ + this.point.name + ‘</b>: ‘ + Highcharts.numberFormat(this.percentage, 1) + ‘% (‘ +
40                                     Highcharts.numberFormat(this.y, 0, ‘,‘) + ‘ 个)‘;
41                             }
42                         },
43                         plotOptions: {
44                             pie: {
45                                 allowPointSelect: true,
46                                 cursor: ‘pointer‘,
47                                 dataLabels: {
48                                     enabled: true,
49                                     formatter: function () {
50                                         if (this.percentage >4) return this.point.name;
51                                     },
52                                     color: ‘white‘,
53                                     style: {
54                                         font: ‘13px Trebuchet MS, Verdana, sans-serif‘
55                                     }
56                                 }
57                             }
58                         },
59                         legend: {
60                             backgroundColor: ‘#FFFFFF‘,
61                             x: 0,
62                             y: -30
63                         },
64                         credits: {
65                             enabled: false
66                         },
67                         series: [{
68                             type: ‘pie‘,
69                             name: ‘Browser share‘,
70                             data: [
71                                 [‘未划拨地块‘, transfer],
72                                 [‘已划拨地块‘, transferNO]
73                             ]
74                         }]
75                     });
76                 });
77             }
78         })
79
80     </script>
81 </body>
82 </html>

html页面

 1 <%@ WebHandler Language="C#" Class="hbtongji" %>
 2
 3 using System;
 4 using System.Web;
 5 using System.Data;
 6 using System.Text;
 7 using  System.Runtime.Serialization.Json;
 8 using System.Web.Script.Serialization;
 9 using KangHui.BaseClass;
10 using KangHui.Common;
11
12
13 public class hbtongji : IHttpHandler {
14
15     public void ProcessRequest (HttpContext context) {
16         string con = ConfigHelper.GetConnectionString("DBConnection");
17         //这是一个显示的数据(未出让地块的数量)
18         string sql = "SELECT COUNT(*) as sum FROM Mhuabo WHERE stateID=4";
19         //这是一个显示的数据(已出让地块的数量)
20         string sql1 = "SELECT COUNT(*) as sum FROM Mhuabo WHERE stateID=5";
21         DataSet ds = DbHelperSQL.Query(sql,con);
22         DataSet ds1 = DbHelperSQL.Query(sql1,con);
23
24         StringBuilder str = new StringBuilder();
25         str.Append("{\"state\":[{\"transfer\":\"" + ds.Tables[0].Rows[0]["sum"] + "\"},{\"transferNO\":\"" + ds1.Tables[0].Rows[0]["sum"] + "\"}]");
26         str.Append("}");
27         context.Response.Write(str.ToString());
28     }
29
30
31     public bool IsReusable {
32         get {
33             return false;
34         }
35     }
36
37 }

一般处理程序页面

公司项目要做统计,饼状图必不可少,闲手之余,写下这篇博客,希望能帮助新手的你。

-----------------------------------------未点饼状图之前

-----------------------------------------点击饼状图的时候

原文地址:https://www.cnblogs.com/liuyanyong/p/9186202.html

时间: 2024-10-12 02:36:59

js饼状图(带百分比)功能实现,新人必懂的相关文章

转:C# 中 MSCHART 饼状图显示百分比

转自:http://blog.sina.com.cn/s/blog_51beaf0e0100yffo.html 1)显示百分比 Chart1.Series["Series1"].Label = "#PERCENT{P2}" 2)解决百分比设定后,legend的显示也为百分比的问题 首先确保你已经在设计器里将Chart设置为饼图形式 在chart的属性,打开legends集合,如果还没有legend成员添加一个,添加legend成员后,在其右边 打开    cellC

Matplotlib基本图形之饼状图

Matplotlib基本图形之饼状图 饼状图特点: 饼状图显示一个数据系列中各项大小与各项总和的比例饼状图的数据点显示为整个饼状图的百分比 示例代码 import os import time import numpy as np import matplotlib.pyplot as plt basedir = os.path.dirname(os.path.abspath(__file__)) resultdir = os.path.join(basedir, 'result') class

android圆饼状图中怎么设置百分比

============问题描述============ 我希望设置成能显示百分数的,如下图 这是我画饼状图的方法,我想给我一点思路 public void drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint) ============解决方案1============ http://www.2cto.com/kf/201402/278932.html ===========

Echarts生成饼状图、条形图以及线形图 JS封装

1.在我们开发程序中,经常会用到生成一些报表,比方说饼状图,条形图,折线图等.不多说了,直接上封装好的代码,如下Echarts.js所示 以下代码是封装在Echarts.js文件中 /** * Created by Administrator on 2015/8/7. */ var charec; // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); // 按需加载所需图表 r

使用JS charts来画图表(二)——饼状图

如上是一个饼状图: 代码如下: <html> <head> <title>部门管理</title> <script type="text/javascript" src="codebase/jscharts.js"></script> </head> <body> <div id="graph">Loading graph...</d

【 D3.js 进阶系列 — 6.2 】 饼状图的拖拽

本文讲解稍微复杂一些的拖拽应用,即拖拽饼图的各部分. 在[入门 - 第 9.1 章]讲解了如何制作饼状图.饼状图的各部分是用具有宽度的弧线来表示的.在与用户进行交互的时候,如果每一部分都能拖拽,是很有趣的. 1.饼状图的绘制 与[入门 - 第 9.1 章]稍有有些不同,我们对饼状图的每一个区域都使用一个 g 标签将其包围起来,以便平移操作. var gAll = svg.append("g") .attr("transform","translate(&q

【 D3.js 入门系列 --- 9.1 】 饼状图的制作

本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 这一节用 Layout 做一个饼状图.第9节中说过, Layout 的作用只是转换数据,将不适合图形化的数据转化成适合图形化的数据.现在使用以下数据: var dataset = [ 30 , 10 , 43 , 55 , 13 ]; 这个数据要不能直接用于画饼状图,我们必须通过计算将它转换成角度.这个计算不需要我们手动计算,因为 D3 中提供了 d3.layo

D3.js的v5版本入门教程(第十三章)—— 饼状图

D3.js的v5版本入门教程(第十三章) 这一章我们来绘制一个简单的饼状图,我们只绘制构成饼状图基本的元素——扇形.文字,从这一章开始,内容可能有点难理解,因为每一章都会引入比较多的难理解知识点,在这里作者本人也只是粗略的讲解每个新知识点的意思!如果不是很理解的话,需要读者自行查看官网API 为了绘制一个饼状图,我们还是需要以下新的知识点 d3.arc( {} ),弧形生成器,用以绘制弧形,需要传入一些用以绘制弧形基本的数据的对象,例如,该对象的属性可以包括(我用官网api的示例) d3.pie

canvas+js画饼状图

效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>饼状图</title> </head> <body> <canvas id="canvas"></canvas> <script> (function () {