highcharts根据柱状图动态生成饼状图

最新推荐文章于 2024-04-23 13:01:43 发布
最新推荐文章于 2024-04-23 13:01:43 发布
阅读量152 收藏
点赞数
文章标签： java javascript c# ViewUI
原文链接：http://www.cnblogs.com/ZpchLover/p/4669823.html
版权

效果图如下：

在代码里引入js：

<script src="../../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="../../../Scripts/Chart/highcharts.src.js" type="text/javascript"></script>
<script src="../../../Scripts/Chart/modules/exporting.src.js" type="text/javascript"></script>
<script src="../../../Scripts/Chart/themes/grid.js" type="text/javascript"></script>

柱状图部分：

 var myChart;
        function bindChart(r, caption) {
            if (myChart) myChart.destroy();
            var op = $.extend({}, {
                title: { text: caption },
                chart: { renderTo: 'container', hight: 300, defaultSeriesType: 'column', margin: [50, 50, 100, 80] },
                exporting: { enabled: false },
                credits: { enabled: false }
            }, r);
            myChart = new Highcharts.Chart(op);
        }
        function splineChar(t, yTitle) {
            var r = {
                plotOptions: {
                    column: {
                            allowPointSelect: true,//是否允许柱子选择
                            cursor:"pointer",
                            states: {
                                select: {
                                    color: "green" //选中柱子后的颜色填充为绿色
                                },
                                hover: {
                                    color: "#aaccff;" //鼠标移入柱子时的颜色填充为红色
                                }
                            }
                        },
                    series: {
                        point: {
                            events: {
                                click: function () {
                                DynamicCreatePieChart(this.category);//这里监听柱状图点击更新饼状图
                                }
                            }
                        }
                    }
                }, exporting: { enabled: true },
                legend: {
                    floating: true,
                    x: -10,
                    y: 50,
                    align: 'right',
                    verticalAlign: 'top',
                    layout: 'vertical',
                    borderWidth: 0//backgroundColor: '#fff',
                }, xAxis: {
                    categories: ['行政许可','案件处理','综合监管','公众诉求','注册登记'], //X轴的坐标值
                    labels: {
                        //rotation: -45,
                        align: 'center',
                        style: { font: 'normal 14px 宋体' }
                    }
                },
                yAxis: {
                    min: 0,
                    title: { text: yTitle}  //Y轴坐标标题  labels:纵柱标尺
                },
                series: [{name: '数量',data: [1607,1146,2817,12,396]}]
            };
            bindChart(r, t);
        };

饼状图部分：

var PieChart;
 $(function () {
            $("#CP1_CP1_btnSearch").removeClass("BUTTON").addClass("btn btn-primary"); 
            DynamicCreatePieChart("行政许可");
            //饼状图创建
            $(document).ready(function () { 
                bindPieChart();
            });
            function bindPieChart()
            {
                PieChart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'pieChart',
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    },
                    title: {
                        text: "类别统计"
                    },
                tooltip: {  
                            formatter: function() { //格式化鼠标滑向图表数据点时显示的提示框  
                                var s;  
                                if (this.point.name) { // 饼状图  
                                    s = '<b>' + this.point.name + '</b>: <br>' + this.y+ '(' + this.percentage.toFixed(2) + '%)'; //百分比需要格式化成两位  
                                } else {  
                                    s = '' + this.x + ': ' + this.y + '';  
                                }  
                                return s;  
                            }  
                     },  
                    plotOptions: {
                        pie: {
                          allowPointSelect: true,
                          cursor: 'pointer',
                          size: '170',
                          dataLabels: {
                              enabled: true,
                              color: '#000000',
                              connectorColor: '#000000',
                              format: '<b>{point.name}</b>:{point.percentage}%'
                          }
                      }
                    }, 
                     series: [{
                        type: 'pie',
                        name: 'Browser share',
                        data: [
                    ['Firefox', 45.0],
                    ['IE', 26.8],
                    {
                        name: 'Chrome',
                        y: 12.8,
                        sliced: true,
                        selected: true
                    },
                    ['Safari', 8.5],
                    ['Opera', 6.2],
                    ['Others', 0.7]
                ]
                    }]<----这里写的死数据---->
                });
            }
        });

动态生成饼状图js：

 ///动态更新饼状图数据
        function DynamicCreatePieChart(name) {   
            $.ajax({
                                type: "GET",
                                url: "../../../AjaxHandler.ashx",
                                data: encodeURI("method=QurryTypeInfo&&ssgnq="+ $("#CP1_CP1_txt_Ssgnq").val()+"&&type=" + name),
                                beforeSend: function () {
                                    $("#vLoading").show();
                                },
                                complete: function () {
                                    $("#vLoading").hide();
                                },
                                cache: false,
                                success: function (data) {
                                    if (data!="") { 
                                        var json_data=eval(data);
                                        PieChart.series[0].setData(json_data);
                                    }
                                     else {
                                            alert("暂无数据！");
                                        }
                                },
                                Error:function()
                                {
                                    alert("数据异常");
                                }
                            }); 
        }

完整前端代码：

<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Controls/RightPageNavBar.Master"
    CodeBehind="ASCSTJ.aspx.cs" Inherits="PDSCJFX.Controls.ZHFXXT.TJFX.ASCSTJ" %>

<asp:Content ID="Content3" ContentPlaceHolderID="CPH" runat="server">
    <link href="../../../ThradPart/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../../../ThradPart/css/bootstrap-responsive.min.css" rel="stylesheet"
        type="text/css" />
    <link href="../../../ThradPart/font-awesome/css/font-awesome.css" rel="stylesheet"
        type="text/css" />
    <script src="../../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="../../../Scripts/Chart/highcharts.src.js" type="text/javascript"></script>
    <script src="../../../Scripts/Chart/modules/exporting.src.js" type="text/javascript"></script>
    <script src="../../../Scripts/Chart/themes/grid.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="CPBtns" runat="server">
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="CP1" runat="server">
    <div class="row-fluid">
        <div class="span6">
            <div class="widget-box" style="margin: 0px; padding: 0px;">
                <div class="widget-content">
                    <div id="container" style="padding: 0px; margin: 0px; position: relative;">
                    </div>
                </div>
            </div>
        </div>
        <div class="span6">
            <div class="widget-box" style="margin: 0px; padding: 0px;">
                <div class="widget-content">
                    <div id="pieChart" style="padding: 0px; position: relative;">
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group ">
            所属市场所&nbsp;
            <asp:DropDownList runat="server" ID="txt_Ssgnq">
            </asp:DropDownList>
            <a style="visibility: hidden">无无</a><asp:Button ID="btnSearch" runat="server" Text=" 查询 "
                OnClick="btnSearch_Click" />
        </div>
        <div id="vLoading" class="vLoading" style="display: none; position: absolute; left: 40%;
            top: 35%">
            正在加载数据，请稍候...
        </div>
    </div>
    <script type="text/javascript">
        function showLode() {
            $("#vLoading").show();
        }
        var myChart;
        function bindChart(r, caption) {
            if (myChart) myChart.destroy();
            var op = $.extend({}, {
                title: { text: caption },
                chart: { renderTo: 'container', hight: 300, defaultSeriesType: 'column', margin: [50, 50, 100, 80] },
                exporting: { enabled: false },
                credits: { enabled: false }
            }, r);
            myChart = new Highcharts.Chart(op);
        }
        function splineChar(t, yTitle) {
            var r = {
                plotOptions: {
                    column: {
                            allowPointSelect: true,//是否允许柱子选择
                            cursor:"pointer",
                            states: {
                                select: {
                                    color: "green" //选中柱子后的颜色填充为绿色
                                },
                                hover: {
                                    color: "#aaccff;" //鼠标移入柱子时的颜色填充为红色
                                }
                            }
                        },
                    series: {
                        point: {
                            events: {
                                click: function () {
                                DynamicCreatePieChart(this.category);
                                }
                            }
                        }
                    }
                }, exporting: { enabled: true },
                legend: {
                    floating: true,
                    x: -10,
                    y: 50,
                    align: 'right',
                    verticalAlign: 'top',
                    layout: 'vertical',
                    borderWidth: 0//backgroundColor: '#fff',
                }, xAxis: {
                    categories: <%= xAxisCategories.ToString() %>, //X轴的坐标值
                    labels: {
                        //rotation: -45,
                        align: 'center',
                        style: { font: 'normal 14px 宋体' }
                    }
                },
                yAxis: {
                    min: 0,
                    title: { text: yTitle}  //Y轴坐标标题  labels:纵柱标尺
                },
                series: <%=returnValue.ToString() %>
            };
            bindChart(r, t);
        };
         var PieChart;
 $(function () {
            $("#CP1_CP1_btnSearch").removeClass("BUTTON").addClass("btn btn-primary"); 
            DynamicCreatePieChart("行政许可");
            //饼状图创建
            $(document).ready(function () { 
                bindPieChart();
            });
            function bindPieChart()
            {
                PieChart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'pieChart',
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    },
                    title: {
                        text: "类别统计"
                    },
                tooltip: {  
                            formatter: function() { //格式化鼠标滑向图表数据点时显示的提示框  
                                var s;  
                                if (this.point.name) { // 饼状图  
                                    s = '<b>' + this.point.name + '</b>: <br>' + this.y+ '(' + this.percentage.toFixed(2) + '%)'; //百分比需要格式化成两位  
                                } else {  
                                    s = '' + this.x + ': ' + this.y + '';  
                                }  
                                return s;  
                            }  
                     },  
                    plotOptions: {
                        pie: {
                          allowPointSelect: true,
                          cursor: 'pointer',
                          size: '170',
                          dataLabels: {
                              enabled: true,
                              color: '#000000',
                              connectorColor: '#000000',
                              format: '<b>{point.name}</b>:{point.percentage}%'
                          }
                      }
                    }, 
                     series: [{
                        type: 'pie',
                        name: 'Browser share',
                        data: [
                    ['Firefox', 45.0],
                    ['IE', 26.8],
                    {
                        name: 'Chrome',
                        y: 12.8,
                        sliced: true,
                        selected: true
                    },
                    ['Safari', 8.5],
                    ['Opera', 6.2],
                    ['Others', 0.7]
                ]
                    }]
                });
            }
        });       
        ///动态更新饼状图数据
        function DynamicCreatePieChart(name) {   
            $.ajax({
                                type: "GET",
                                url: "../../../AjaxHandler.ashx",
                                data: encodeURI("method=QurryTypeInfo&&ssgnq="+ $("#CP1_CP1_txt_Ssgnq").val()+"&&type=" + name),
                                beforeSend: function () {
                                    $("#vLoading").show();
                                },
                                complete: function () {
                                    $("#vLoading").hide();
                                },
                                cache: false,
                                success: function (data) {
                                    if (data!="") { 
                                        var json_data=eval(data);
                                        PieChart.series[0].setData(json_data);
                                    }
                                     else {
                                            alert("暂无数据！");
                                        }
                                },
                                Error:function()
                                {
                                    alert("数据异常");
                                }
                            }); 
        }
    </script>
</asp:Content>
View Code

 后端代码：

注册页面每次加载绘画柱状图：Page.ClientScript.RegisterStartupScript(this.GetType(), "s1", "<script>splineChar('" + title + "','" + yTitle + "');</script>");

转载于:https://www.cnblogs.com/ZpchLover/p/4669823.html

weixin_30640291
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS highcharts动态柱状图原理及实现
01-18
官网是没有动态刷新的示例的，由于需要我查看了其源码，并根据之前示例做出了动态柱状图的效果，希望对同学们有用！ 看一下代码： <%@ page language=java import=java.util.* pageEncoding=UTF-8%> <...
对highcharts的总结（饼图、柱状图、折线图、曲线图）
java_zhaoyanli的专栏
10-25 3981
1，饼图 Highcharts Example g.highcharts-grid:nth-child(6) > path { stroke-width: 0; } .highcharts-background{ fill:transparent !importan
Vue 中使用 Highcharts 做一个动态饼状图
一行代码敲一天
11-13 1623
Vue 中使用 Highcharts 做一个动态饼状图 今天在vue中我们来使用Highcharts做一个动态饼状图跟一个动态柱状图。 一、先构建一个vue项目 使用vue-cli脚手架快速构建一个vue项目(这里我不在概述) highchars的导入 npm install highcharts 然后我们在components下创建一个chart.vue文件**，用于搭建ch...
用Highcharts 框架做简单的柱状图、饼图、折线图
Richard_Jason的专栏
10-24 1864
效果图： 文件结构： 只是个简单的图，数据都是写进去的（可以动态提取） 首先是HTML代码： 无标题文档           柱状图
Highcharts实现饼图pie
jianghaha2011的博客
04-22 544
上图类似 chartPie_market: function (docm) { let pieData = []; let slef = this; slef.MainCount.listY.forEach(function (item, index) { let op = { name: slef.Ma...
[Highcharts] 初识Highcharts 饼状图示例
吥_悔->青春
09-29 2661
简介： HighCharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。 HighCharts 界面美观，由于使用JavaScript编写，所以不需要像Flash和Java
jQuery.Highcharts.js绘制柱状图饼状图曲线图
10-24
主要介绍了jQuery.Highcharts.js绘制柱状图饼状图曲线图的方法，非常的实用，小伙伴们可以直接拿到项目中使用。
PHP+mysql+Highcharts生成饼状图
09-03
本文将结合实际,使用PHP读取Mysql数据表中的数据,并将获取的数据按照要求输出给前端JS,再通过配置调用Highcharts图表库生成饼状图。
highcharts柱状图
09-04
highcharts柱状图
Highcharts+PHP+Mysql生成饼状统计图
09-04
Highcharts+PHP+Mysql生成饼状统计图
highcharts 下钻 多个series 三级 四级 多级 多种图例 柱状图 饼状图 折线图
02-22
解决highcharts多级下钻问题，下钻过程中使用了多种图例，自带上钻功能 c#，java使用方法一样，demo中使用c#方法实现 vs打开直接可以运行无需连接数据库 大数据可使用异步下钻http://download.csdn.net/detail/ioricnn/9760509
用 Highcharts 绘制饼图，也很强大
Python数据之道
03-14 544
来源：Python数据之道作者：Peter整理：阳哥用 Highcharts 绘制饼图，也很强大前不久，阳哥在「Python数据之道」分享了读者投稿的文章，较为综合的介绍了可视化库 Hig...
vue+highcharts前后端交互 之 前端动态调用数据（饼图，柱形图）
qq_41648113的博客
04-17 2392
前些天项目遇到了图表的开发，总结了一下流程，分享给大家 加载highcharts的流程不过多赘述，详情请看下方链接 Highcharts Vue教程 直接上代码 vue 图表布局 Test.vue <template> <div> <s-table rowKey="id" ref="table" > <a-...
Highchart 饼图联动
weixin_30567471的博客
05-21 94
感觉好久没有更新博客了，最近一直忙着毕业论文，紧接着就开始搭建数据库，实在抽不出时间写。 正好趁着做数据库，写一写关于Highchart里两个饼图之间的互动。 用到的数据比较大，我也懒得修饰了，涉及到两个pie图的div，分别是pie_container 和signature_container。 先说明一下画signature_container时为了和 pie_contain...
highcharts多图表联动
Mr-yang的随笔
01-19 986
官方案例： https://www.highcharts.com.cn/demo/highcharts/synchronized-charts 展示图： vue中使用 触发： watch: { chartList: { handler (n) { if (!this.mouseMove) { this.mouseMove = true setTimeout(() => { this.handleMouse()
hightcharts制作饼状图
u011220266的博客
07-31 294
最近用到了饼状图，学习了highcharts，简单记录一下 highcharts一个开源js框架，用于制作各种图表，学习免费，商用收费！ echarts也是个开源框架，用于制作各种图表，学习和商用都是免费。echarts的API更加详细 一、js引用 <script src="charts/highcharts.js">...
string模拟实现
最新发布
m0_73969414的博客
04-23 1280
c++中string的模拟实现，面试必会知识点
javaweb-SpringBoot基础
kussm_的博客
04-20 1210
Spring的官网(Spring的简介：Spring makes Java simple。Spring Boot 可以帮助我们非常快速的构建应用程序、简化开发、提高效率。创建一个子包controller。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值