zoukankan      html  css  js  c++  java
  • 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数据

  • 相关阅读:
    js的原型链
    setTimeout浅析
    并行模式库PPL应用实战(一):使用task类创建并行任务
    PC客户端开发细节记录:保存GUID到VARIANT
    UWP开发细节记录:DirectX::XMMATRIX 的坑
    UWP开发细节记录:WRL::ComPtr 的坑
    UWP开发细节记录:IStream 和 IRandomAccessStream^ 以及 IMFByteStream 互转
    UWP开发细节记录:判断文件类型
    UWP开发细节记录:加载图像文件到D2D位图和D3D纹理
    基于纤程(Fiber)实现C++异步编程库(一):原理及示例
  • 原文地址:https://www.cnblogs.com/gxwa/p/9103331.html
Copyright © 2011-2022 走看看