zoukankan      html  css  js  c++  java
  • HighCharts 饼图

    @{
        ViewBag.Title = "Index";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    
    @section PageSpecificJavascriptIncludes{
        <script src="~/Assets/Highcharts-4.1.8/js/highcharts.js"></script>
       <script src="~/Assets/Highcharts-4.1.8/js/themes/grid.js"></script>
        <script type="text/javascript">
      
            Highcharts.setOptions({
                yAxis: {
                    gridLineDashStyle: 'ShortDot',
                    gridLineColor: '#FFB5B5',
                    tickWidth: 1,
                    tickColor: '#FFB5B5',
                    tickPosition: 'inside'
    
                },
                xAxis: {
                    lineColor: '#333',
                    lineWidth: 2,
                    tickPosition: 'inside',
                    tickColor: '#888888',
                    tickLength: 5
                },
    
            });
            $(function () {
                donateChart(new Date().getFullYear());
    
                $("#year").change(function () {
                    var year = $(this).val();
                    console.log(year);
                    if (year != "") {
                        donateChart(year);
                    }
                });
            });
            function donateChart(year) {
                //X
                var categories = [];
                //Y
                var db=[,]
                var datas = [];
                var dbdata = [,];
                var url = "@Url.Action("GetData","StatisticAnalysis")";
                var param = new Object();
                //param.id = year;
                $.z_ajaxAction(url, param, function (result) {
                    var obj = result;          
                    var length = obj.length;
                    for (var i = 0; i < length; i++)
                    {
                        //类型
                        categories[i] = obj[i].Type;
                        //比例
                        datas[i] = parseInt(obj[i].Proportion);
                        //数组
                        db[i] = [categories[i], datas[i]]
                    }
                
                    createChart(categories, db, year);
                });
    
          
            }
    
            function createChart(categories, db, year) {
    
                new Highcharts.Chart({
                    chart: {
                        renderTo: "container1",
                        backgroundColor: null,
                        spacingRight: 20
                    },
                    credits: {
                        enabled: false
                    },
                    title: {
                        text: year+'年销售收入比例构成',
                       
                        y: 10
                    },
                    colors: [
                        '#0088cc',
                        '#5CB85C',
                       ' #FFB5B5',
                       '#FF2D2D',
                       '#FFFF37',
                       '#C07AB8'
                    ],
    
                    xAxis: {
                        categories: categories,
    
                    },
                    exporting: {
                        enabled: false
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                color: '#000000',
                                connectorColor: '#000000',
                                format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                            }
                        }
                    },
                
                    series: [{
                        name: '比例',
                       data: db,
                        type: 'pie',
                        tooltip: {
                            valueSuffix: '%'
                        }
                    }
                    ]
                });
            }
        </script>
        
        
        
        }
     <div id="container1" style="height: 300px;max-500px">
    
     </div>    
    <select id="year">
        <option value="">选择年份</option>
        <option value="2015">2015</option>
        <option value="2014">2014</option>
    </select>
  • 相关阅读:
    Centos7 下 PHP 添加缺少的组件 sockets 和 openssl
    vue使用 video.js动态切换视频源视频源不刷新问题
    vue+js清除定时器
    获取ip地址,并根据ip获取当前省份
    html页面引用video.js播放m3u8格式视频
    uniapp每隔几秒执行一下网络请求(h5端亲测可以,其他端未测试)
    关于uniapp获取当前距离屏幕顶部的距离
    按值传递与按值引用详解(java版)
    JavaScript的深入理解(1)
    vue-cli3配置webpack-bundle-analyzer插件
  • 原文地址:https://www.cnblogs.com/lk-kk/p/4797183.html
Copyright © 2011-2022 走看看