• 【Highcharts】 绘制饼图和漏斗图


    1.outModel类设计

      设计outModel类首先研究下Highcharts中series的data数据格式,发现饼图和漏斗图都可以使用这样格式的数据

    series: [{
        name: 'Unique users',
        data: [
            ['Website visits', 15654],
            ['Downloads', 4064],
            ['Requested price list', 1987],
            ['Invoice sent', 976],
            ['Finalized', 846]
            ]
        }]

        刚看到数据格式的时候,会不自觉的想起Dictionary<string,int>或者Hashtable ,outModel就会设计成以下两种形式

        public class HomeOut
          {
            public string Name { get; set; }//渲染series[0].name
            public Dictionary<string, int> Dicdata { get; set; }//渲染series[0].data
          }
        或者

        public class HomeOut
          {
            public string Name { get; set; }//渲染series[0].name
            public Hashtable Ht { get; set; }//渲染series[0].data
          }

        但是会发现当 return Json(outModel, JsonRequestBehavior.AllowGet);的时候,前台获取到的Dicdata 或者Hashtable 只能是object Object,所以顺其自然的会想到Jquery解析数据,的确能解析成功,但是在把数据填充Highcharts的时候会发现怎么也填充不对,push()和chart.series[0].data=解析过的json数据,都不能实现。也许是自己研究的不对,有看到的园友,成功实现的请留言指导。

        后来,迫不得已只能才用以前自己使用Highcharts绘制柱状图和折线图的方法了,下面开始

        设计outModel 的时候,我设计成了这样

     

        

    public class HomeOut
            {
              public string Name { get; set; }
              public List<TempClass> tempClass { get; set; }
            }
    public class TempClass
          {
            public string name { get; set; }
            public int y { get; set; }
          }

        之所以设计成这样,我是发现绘制饼图和漏斗图的时候series还可以这样写

    饼图:  

    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]
                      ]
                }]
    View Code

    漏斗图

     series: [{
         name: 'Unique users',
         data: [
         ['Website visits', 15654],
         ['Downloads', 4064],
         {
           name:'Requested price list',
           y:1987
         },
         ['Invoice sent', 976],
         ['Finalized', 846]
           ]
        }]
    View Code

         对比之下,两个图表的data都可以才用{name:'***',y:***}格式

    下面贴出全部代码(排版还不会,就不整了)

    HomeCotroller

    public ActionResult Index2()
    {
    return View();
    }
    public ActionResult GetData()
    {
    var outModel = new HomeOut();
    //Dictionary<string, int> dic = new Dictionary<string, int>() { 
    //{"wo",1990},
    //{"you",1200},
    //{"she",1000},
    //{"it",800}
    //};
    //Hashtable ht = new Hashtable();
    //ht.Add("wo", 1990);
    //ht.Add("you", 1900);
    //ht.Add("she", 1800);
    //ht.Add("it", 1700);
    //ht.Add("he", 1600);
    //outModel.dicdata = dic;
    outModel.Name = "123";
    List<TempClass> tempClassList = new List<TempClass>(){
    new TempClass(){name="wo",y=1},
    new TempClass(){name="you",y=2},
    new TempClass(){name="she",y=3},
    new TempClass(){name="he",y=3}
    };
    outModel.tempClass = tempClassList;
    return Json(outModel, JsonRequestBehavior.AllowGet);
    }
    View Code

    cshtml页面

    <body>
    <div id="container"></div>
    <input type="button" value="sub" id="sub" />
    </body>
    View Code

    js

    <script>
    var options =
    {
    chart: {
    renderTo: 'container',
    type: 'funnel',
    marginRight: 100
    },
    title: {
    text: 'Sales funnel',
    x: -50
    },
    plotOptions: {
    series: {
    dataLabels: {
    enabled: true,
    format: '<b>{point.name}</b> ({point.y:,.0f})',
    color: 'black',
    softConnector: true
    },
    neckWidth: '30%',
    neckHeight: '25%'
    
    //-- Other available options
    // height: pixels or percent
    //  pixels or percent
    }
    },
    legend: {
    enabled: false
    },
    series: [{
    name: '访问量',
    data: [
    ['Website visits', 15654],
    ['Downloads', 4064],
    ['Requested price list', 1987],
    ['Invoice sent', 976],
    ['Finalized', 846]
    ]
    }]
    }
    
    </script>
    <script type="text/javascript">
    $(function () {
    var chart = new Highcharts.Chart(options);
    GetD();
    });
    $("#sub").click(function () {
    GetD();
    });
    function GetD() {
    $.ajax({
    type: 'POST',
    url: '/Home/GetData',
    data: {},
    success: function (result) {
    options.series[0].data = result.tempClass;
    var chart = new Highcharts.Chart(options);
    }
    });
    }
    </script>
    View Code
  • 相关阅读:
    办公室搞笑记(2) 李姐
    世界上疼我的人又少了一个
    带给杨帆的祝福:)
    火:) 火:) 火:)
    我们都是享受寂寞的孩子:)
    복 경 에 갑 니 다 :) 去北京.
    너는 겨울이 좋아요 .我喜欢冬天:)
    2007年:新年,新开始:)
    Nginx 泛域名配置方式
    数据库设计 从零开始系列之一
  • 原文地址:https://www.cnblogs.com/lb12081116/p/4371634.html
Copyright © 2020-2023  润新知