hightchart扇形图asp.net mvc 实现

实现效果

实现代码：

function InitChart() {
        chartBQ = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            }, title: {
                text: null
            },
            credits: {
                enabled: false//去水印
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    size: 300,
                    innerSize: 70,
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                name: '所占比例'
            }]
        });
        //调用查询，加载数据
        GetDataBQ();
    }
    function GetDataBQ() {
        $.ajax({
            type: 'get',
            url: "../../ReportManage/Report/PhoneTypeTu",
            data: { sdate: $("#myyear").val() },
            success: function (data) {
                data = JSON.parse(data);
                var newdata = new Array();
                $.each(data, function (i, d) {
                    newdata.push(new Array(d.sname, parseInt(d.svalue)));
                });
                chartBQ.series[0].setData(newdata);//数据填充到highcharts上面
            },
            error: function (e) {
                alert("不好意思，要访问的数据跑到火星去了。。。。");
            }
        });
    };

mvc后端代码就是一个简单查询，得到列表数据，然后返回成JSON数据

转载于:https://www.cnblogs.com/gxwa/p/9103331.html

• 点赞
• 收藏
• 分享
• 文章举报