Javascript图表插件HighCharts用法案例

最近还在忙着基于ABP的项目，但本篇博客和ABP无关，喜欢ABP框架的朋友请点击传送门。

这不，最近项目基本功能做的差不多了，现在在做一个数据统计的功能，需要绘制区域图（或折线图）和饼图。一开始，楼主就去Google了一下最常用的绘图插件都有哪些，最后直接去Github上搜索关键词chart，搜索结果如下：

点了几个进去看了之后，楼主考虑到项目要以后肯定要维护，万一维护的开发者英文不咋地呢（其实楼主我是喜欢看英文文档的）？所以，我起初选择了某度出品的Echarts.js。但是选择了它之后，查看文档学习，虽然文档是中文的，但我感觉这文档比英文还难读懂，因为有些术语解释不详细，最后好不容易做了个demo，但还出现了bug，开了一个Issue，维护人员简单地敷衍之后反而直接给关了，楼主表示很受伤也很气愤。心想，好吧，你某度牛逼，我不用你的Echarts行了吧，惹不起还躲不起嘛。

最后，经过几个朋友的介绍，他们都选择的Highcharts，去Highcharts官网看了下，感觉文档就是比Echarts详细，简单易懂，所以我也就选择了她。【这里建议新手朋友们先使用Highcharts，等对图表熟悉了再使用Echarts，毕竟Echarts的图表种类很丰富】而且，到现在，功能也都实现了，效果如下：

楼主在学习的时候，发现网上这方面的资料也不是很多，尤其是从服务端如何传数据到客户端，没有详细的解决方案，也是摸索了很久，这次，我直接将自己的解决方案拿出来和大家分享，供初学者参考，少走弯路，大神请绕道。

区域图

<div class="row">
    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-area-chart font-purple"></i>
                <span class="caption-subject  bold uppercase">收入趋势</span>
            </div>
        </div>
        <div class="portlet-body">
            <div id="incomeTrend" style="width:98%;height: 500px">

            </div>
        </div>

    </div>

</div>

		var dateSpan;
        Highcharts.setOptions({
            lang: {

                printChart: '打印图表',
                downloadJPEG: '下载为JPEG图片',
                downloadPDF: '下载为PDF',
                downloadPNG: '下载为PNG图片',
                downloadSVG: '下载为SVG矢量图',
                months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
                weekdays: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
                shortMonths: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
            }
        });
        var isByDay = true;//default by days

        var option = {

            chart: {
                type: 'area'
            },
            title: {
                text: '收入趋势图'
            },
            subtitle: {
                text: '没有选择时间范围的话，默认显示最近7天的数据'
            },
            credits: {
                enabled: false
            },
            xAxis: {
                type: 'datetime',
                tickmarkPlacement: 'on',
                title: {
                    enabled: false
                },
                dateTimeLabelFormats: {
                    day: "%Y-%m-%d",
                    week: "%A",
                    month: "%Y-%m",
                    year: "%Y"
                }
            },
            yAxis: {
                title: {
                    text: '单位：元'
                },
                labels: {
                    formatter: function () {
                        return this.value;
                    }
                }
            },
            tooltip: {
                shared: true,
                valueSuffix: ' 元',
                dateTimeLabelFormats: {
                    day: "%Y-%m-%d,%A",
                    week: "%A开始, %Y-%m-%d",
                    month: "%Y-%m",
                    year: "%Y"
                }
            },
            plotOptions: {
                area: {
                    stacking: 'normal',
                    lineColor: '#666666',
                    lineWidth: 1,
                    marker: {
                        lineWidth: 1,
                        lineColor: '#666666'
                    }
                },
                series: {
                    //pointStart: Date.UTC(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate() - 7),
                    //pointInterval: 24 * 36e5 //一天
                }
            },
            series: [{}]
        }

        var url = getTargetUrl('Dashboard', "GetJsonResult");//这里是url
        var drp = $('#dateRange').data('daterangepicker');
        if (!dateSpan) {
            dateSpan = { start: drp.startDate.format('YYYY-MM-DD'), end: drp.endDate.format('YYYY-MM-DD') }
        }

     	rawChart(isByDay);

        $('#createChart').click(function (e) {
            if ($('#byMonth').attr('checked')) {//按月
                isByDay = false;
                //alert('选择了' + $('#byMonth').attr('checked'));
            }
            e.preventDefault();
            drawChart(isByDay);
            drawPieChart(isByDay);
        });

        $('#defaultChart').click(function (e) {
            e.preventDefault();
            drp.setStartDate(moment().subtract(7, "days"));
            drp.setEndDate(moment().subtract(1, "days"));
            dateSpan = { start: drp.startDate.format('YYYY-MM-DD'), end: drp.endDate.format('YYYY-MM-DD') };
            $('#dateRange').val('');
            isByDay = true;
            drawChart(isByDay);
            drawPieChart(isByDay);
        });

        function drawChart(isByDay) {
            var year = moment(dateSpan.start).format('YYYY');
            var month = moment(dateSpan.start).format('M') - 1;//js的date函数的月份是从0-11，所以这里减1
            var day = moment(dateSpan.start).format('D');
            //console.log(year,month,day);
            if (isByDay) {
                $.getJSON(url, dateSpan, function (datas) {

                    option.series = datas;
                    option.plotOptions.series.pointStart = Date.UTC(year, month, day);
                    option.plotOptions.series.pointInterval = 24 * 36e5;
                    $('#incomeTrend').highcharts(option);
                });
            } else {
                var start = drp.startDate.format('YYYY-MM');
                var end = drp.endDate.format('YYYY-MM');
                if (start == end) {
                    start = drp.startDate.subtract(5, "month").format('YYYY-MM');
                }
                year = moment(start).format('YYYY');
                month = moment(start).format('M')-1;
                dateSpan = { start: start, end: end };

                $.getJSON(url, dateSpan, function (datas) {
                    option.series = datas;
                    option.plotOptions.series.pointStart = Date.UTC(year, month, 1);
                    option.plotOptions.series.pointInterval = 1;
                    option.plotOptions.series.pointIntervalUnit = "month";
                    $('#incomeTrend').highcharts(option);
                });
            }

        }

注意： 区域图和饼图公用同一个action，所以代码一起放到最后。

饼图

            <div class="row">
                <div class="portlet light bordered col-md-8">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-adjust font-red"></i>
                            <span class="caption-subject  bold uppercase">收入比例</span>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <div id="incomeRatio" style="width:90%;height: 500px">

                        </div>
                    </div>
                </div>

        var pieChartOption = {
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },
            title: {
                text: ''
            },
            credits: {
                enabled: false
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f}%<br/> {y}元 ',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    }
                }
            },
            series: [
                {
                    name: '占比',
                    colorByPoint: true,
                    data: []
                }
            ]
        };

        function drawPieChart() {
            var year = moment(dateSpan.start).format('YYYY');
            var month = moment(dateSpan.start).format('M') - 1;//js的date函数的月份是从0-11，所以这里减1
            var day = moment(dateSpan.start).format('D');
            //console.log(year,month,day);
            $.getJSON(url + "?chartType=pie", dateSpan, function (datas) {
                pieChartOption.series[0].data = datas;
                var sum=0;
                for (var i = 0; i < datas.length; i++) {
                    sum += datas[i].y;
                }
                pieChartOption.title.text = "收入比例情况：（总收入"+sum+"）元";
                $('#incomeRatio').highcharts(pieChartOption);
            });
        }

        drawPieChart();

服务端Web层的C#代码如下：

        public async Task<ContentResult> GetJsonResult(string start, string end)
        {
            string dataJsonStr;
            var defaultStart = DateTime.Parse(start);
            var defaultEnd = DateTime.Parse(end);
            var timeSpan = new DateTimeSpan { Start = defaultStart, End = defaultEnd };
            var totalIncomeList = await _orderAppService.GetDateIncome(new GetDateIncomeDto
            {
                Start = defaultStart,
                End = defaultEnd
            });//总收入

            var scanCodeChargeIncomeList = await _orderAppService.GetDateIncome(new GetDateIncomeDto
            {
                Start = defaultStart,
                End = defaultEnd,
                IsScanCodeChargingIncome = true
            });//扫码充电收入
            var lineSoldIncomeList = await _orderAppService.GetDateIncome(new GetDateIncomeDto
            {
                Start = defaultStart,
                End = defaultEnd,
                IsLineSoldIncome = true
            });//售线收入

            var castCoinsIncomeList = await _castCoinsAppService.GetDateCoinsIncome(new GetDateCoinsIncomeDto
            {
                Start = defaultStart,
                End = defaultEnd
            });//投币收入

              var allKindsOfIncomeList = new List<DateIncomeListWithName>
                {
                    new DateIncomeListWithName
                    {
                        DateIncomeDtos = castCoinsIncomeList,
                        Name = "投币"
                    },
                       new DateIncomeListWithName
                    {
                        DateIncomeDtos = lineSoldIncomeList,
                        Name = "售线"
                    },
                       new DateIncomeListWithName
                    {
                        DateIncomeDtos = scanCodeChargeIncomeList,
                        Name = "扫码充电"
                    }
                };
            if (Request.QueryString.Get("chartType") == "pie")//饼图
            {
                var pieDataList = new List<PieChartDataFormat>();
                GetPieChartData(pieDataList, allKindsOfIncomeList);
                dataJsonStr = JsonConvert.SerializeObject(pieDataList, new JsonSerializerSettings() { ContractResolver = new CamelCasePropertyNamesContractResolver() });
            }
            else
            {
                var dataList = new List<ChartDataFormat>();
                allKindsOfIncomeList.Add(new DateIncomeListWithName{DateIncomeDtos = totalIncomeList,Name = "总收入"});
                GetData(dataList,allKindsOfIncomeList,timeSpan);
                dataJsonStr = JsonConvert.SerializeObject(dataList, new JsonSerializerSettings() { ContractResolver = new CamelCasePropertyNamesContractResolver() });
            }

            return Content(dataJsonStr);
        }

        private void GetData(List<ChartDataFormat> dataList, List<DateIncomeListWithName> incomeList, DateTimeSpan span)
        {
            var dateList = ConvertTimeSpanToList(span);
            foreach (DateIncomeListWithName dateIncomeListWithName in incomeList)
            {
                var newList = CheckoutIncomeList(dateIncomeListWithName.DateIncomeDtos, dateList);
                var list = newList.Select(dateIncomeDto => dateIncomeDto.Income).ToList();

                dataList.Add(new ChartDataFormat
                {
                    Name = dateIncomeListWithName.Name,
                    Data = list
                });

            }
        }

        private void GetPieChartData(List<PieChartDataFormat> dataList, List<DateIncomeListWithName> incomeLists)
        {
            foreach (DateIncomeListWithName dateIncomeListWithName in incomeLists)
            {
                var total = dateIncomeListWithName.DateIncomeDtos.Sum(i => i.Income);
                var item = new PieChartDataFormat
                {
                    Name = dateIncomeListWithName.Name,
                    Y = total
                };
                dataList.Add(item);
            }

        }

        List<DateIncomeDto> CheckoutIncomeList(List<DateIncomeDto> incomeList, List<DateTime> dateList)
        {
            var newIncomeList = new List<DateIncomeDto>();
            newIncomeList = (from date in dateList
                             join incomeDto in incomeList on date.Date equals incomeDto.Date into result
                             from r in result.DefaultIfEmpty()
                             select new DateIncomeDto
                             {
                                 Date = date.Date,
                                 Income = r == null ? 0 : r.Income
                             }).ToList();

            return newIncomeList;
        }

        private List<DateTime> ConvertTimeSpanToList(DateTimeSpan span)
        {
            var list = new List<DateTime>();
            for (DateTime i = span.Start; i <= span.End; i = i.AddDays(1))
            {
                list.Add(i);
            }
            return list;
        }

上面这段代码，楼主自认为封装的还不错，很简洁（这已经成为楼主编程追求的目标），平均每个方法10行左右(除了第一个)，仅供大家参考。

下面两个类定义了两种图表从Server端到Client端的数据格式 ：####

    class ChartDataFormat
    {
        public string Name { get; set; }
        public List<decimal> Data { get; set; }
    }

    class PieChartDataFormat
    {
        public string Name { get; set; }
        public decimal Y { get; set; }
    }

应用服务层也贴一个方法的代码，仅供参考

        public async Task<List<DateIncomeDto>> GetDateIncome(GetDateIncomeDto input)
        {
            var query= _orderRepository.GetAll()
                .Where(o => o.Status == OrderStatus.Freezen || o.Status == OrderStatus.Settled || o.Status == OrderStatus.HasInformedDevice)
                .Where(o => o.OrderDate >= input.Start && o.OrderDate <= input.End)
                .WhereIf(input.IsLineSoldIncome,o=>o.OrderType==OrderType.LineSold)
                .WhereIf(input.IsScanCodeChargingIncome,o=>o.OrderType==OrderType.Charge)
                .OrderBy(o => DbFunctions.TruncateTime(o.OrderDate))
                .GroupBy(o => DbFunctions.TruncateTime(o.OrderDate))
                .Select(group => new DateIncomeDto{Date=group.Key.Value,Income=group.Sum(item=>item.PayFee??0)});

            var list = await query.ToListAsync();
            return list;
        }

这些就是整个图表的实现方案，切记仅供参考，不可生搬硬套，如因程序bug导致您公司的重大损失，本人一概不负责任。此话莫当真，纯属娱乐一下。