首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >cssjshtml kendoui饼图传参

cssjshtml kendoui饼图传参

作者头像
葫芦
发布2019-04-17 14:51:47
5410
发布2019-04-17 14:51:47
举报
文章被收录于专栏:葫芦葫芦

kendoui 圆饼图传参,鼠标点击圆饼对应区块传参不同数据:

{"data": [{"category": "类别1", "value": 14}, {"category": "类别2", "value": 4}, {"category": "类别3", "value": 7}, {"category": "类别4", "value": 2}, {"category": "类别5", "value": 43}, {"category": "类别6", "value": 8}], "result": true}
<script>
  
    var piedata = [];
        $.ajax({
            url: "${SITE_URL}countpie/",
            type: 'GET',
            dataType: 'json',
            async: true,

            success: function (res) {
                //获取数据成功
                if (res.result) {
                    piedata = res.data;
                    $('#chartC').kendoChart({
                        legend: {
                            position: "bottom"
                        },
                        theme: 'bootstrap',
                        seriesDefaults: {
                            labels: {
                                template: "#= category # - #= kendo.format('{0:P}', percentage)#",
                                position: "outsideEnd",
                                visible: true,
                                background: "transparent"
                            }
                        },
                        categoryAxis: {
                            categories: piedata.categories,
                            majorGridLines: {
                                visible: false
                            },
                            labels: {
                                rotation: "auto"
                            }
                        },
                        render: function (event) {
                            $("svg").css('padding-top', '15px');
                        },
                        series: [{
                            name: '访问来源',
                            type: 'pie',
                            data: piedata
                        }],
                        seriesClick: function (event) {
                            layer.ready(function () {
                                layer.open({
                                    type: 2,
                                    //关键传参
                                    title: '\<font color="red">' + event.category + '\<\/font>',
                                    maxmin: true,
                                    area: ['910px', '810px'],
                                    content: '${SITE_URL}g6demo',
                                    end: function () {
                                        layer.tips('Hi', '#about', {tips: 1})
                                    }
                                });
                            });
                        }


                    });
                }
            }
        });
</script>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018/11/01 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档