基于Jquery highcharts 图表控件,求好心人 .

mc_dv 2014-12-04 07:42:47
求个动态加载的柱图和曲线图的例子, 谢谢 。 100分求好心人.
...全文
123 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
mc_dv 2014-12-05
  • 打赏
  • 举报
回复
引用 7 楼 kongwei521 的回复:
基础百度图表开发的 Echarts 有图有真像 http://blog.csdn.net/kongwei521/article/details/39151423 http://blog.csdn.net/kongwei521/article/details/39151627
头像是本人和女朋友吗,
jhdxhj 2014-12-05
  • 打赏
  • 举报
回复
友情帮顶,做个记号
蝶恋花雨 2014-12-05
  • 打赏
  • 举报
回复
wangweimutou 2014-12-05
  • 打赏
  • 举报
回复
前端参考代码:

  <script type="text/javascript">
             function showSale(startTime, endTime) {
                 var saleChart;

                     $("#Loading").show();
                     var options = {
                         chart: {
                             renderTo: 'containerSale',
                             type: 'column'
                         },
                         title: {
                             text: '各销售团队销售量'
                         },
                         subtitle: {
                             text: '--数据为各团队成员销售量的总和'
                         },
                         xAxis: {
                             categories: []
                         },
                         yAxis: {
                             min: 0,
                             title: {
                                 text: '单位 (单)'
                             }
                         },
                         legend: {
                             layout: 'vertical',
                             backgroundColor: '#FFFFFF',
                             align: 'left',
                             verticalAlign: 'top',
                             x: 100,
                             y: 70,
                             floating: true,
                             shadow: true
                         },
                         tooltip: {
                             formatter: function () {
                                 return '' +
                                           this.x + ': ' + this.y + ' 单';
                             }
                         },
                         plotOptions: {
                             column: {
                                 pointPadding: 0.2,
                                 borderWidth: 0
                             }
                         },
                         series: []
                     };

                     //读取部门数据
                     $.ajax({
                         type: "POST",
                         url: "/Tool/GetBusinessDept",
                         success: function (msg) {
                             dept = [];
                             $.each(msg, function (i, d) {
                                 dept.push([d.DeptName]);
                             });
                             options.xAxis.categories = dept;

                             //读取销售数据
                             $.ajax({
                                 type: "POST",
                                 url: "/Tool/GetSaleByDept",
                                 data: { startTime: startTime, endTime: endTime },
                                 success: function (result) {

                                     var series = { name: '销售量', data: [] };
                                     $.each(result, function (itemNo, item) {
                                         series.data.push(item.SaleCount);
                                     });

                                     options.series.push(series);
                                     saleChart = new Highcharts.Chart(options);
                                     $("#Loading").hide();
                                 }
                             });

                         }
                     });
 
             }
		</script>


 <div id="containerSale" style="min-width: 100%; height: 400px; margin: 0 auto;" ></div>
<div id="Loading" style="position: absolute; z-index: 100; top: 300px; left: 431.5px;
    display: none; height: 25px;">
    <table cellspacing="0" cellpadding="0" border="1" width="215" style="font-family: Arial;
        background-color: #ffff99">
        <tbody>
            <tr>
                <td>
                    <p align="center">
                        <img border="0" src="../../Content/loading.gif" alt="" />
                        <br />
                        <font color="Red">读取数据…</font>
                    </p>
                </td>
            </tr>
        </tbody>
    </table>
</div>
后端参考代码:

 [HttpPost]
        public ActionResult GetSaleByDept(string startTime, string endTime)
        {
            List<ListSaleByDept> listSaleCountByDept = new List<ListSaleByDept>();
            DateTime start = System.DateTime.Now;
            DateTime end = System.DateTime.Now;
            if (startTime != "" && endTime != "")
            {
                start = DateTime.Parse(startTime);
                end = DateTime.Parse(endTime);
            }
            string pid = IDepartmentsR.Departments.FirstOrDefault(x => x.DeptName == "业务部").ID.ToString();
            var queryDept = IDepartmentsR.Departments.Where(x => x.ParentID == pid).OrderByDescending(x => x.CreateTime).ToList();
            foreach (var itemDept in queryDept)
            {
                int saleCount = 0;
                var deptUsers = IUsersR.Users.Where(x => x.Department.DeptName == itemDept.DeptName && x.UserState == "在职").ToList();
                foreach (var itemUser in deptUsers)
                {
                    var queryItem = ISaleItemLogR.SaleItemLogs.ToList();
                    List<SaleLog> querySale = new List<SaleLog>();
                    if (startTime != "" && endTime != "")
                    {
                         querySale = ISaleLogR.SaleLogs.Where(x => x.LadingBillType != "减工号" && x.LadingBillType != "转白银").
                            Where(x => x.LadingBillPeople == itemUser.UserName).
                            Where(x => x.LadingBillDate >= start && x.LadingBillDate < end).ToList();
                    }
                    else
                    {
                         querySale = ISaleLogR.SaleLogs.Where(x => x.LadingBillType != "减工号" && x.LadingBillType != "转白银").
                                Where(x => x.LadingBillPeople == itemUser.UserName).ToList();
                    }

                    int query = (from q in querySale
                                join s in queryItem
                                              on q.ID equals s.saleLog.ID
                                select new
                                {
                                    UserName = q.LadingBillPeople,
                                    ActualIntegral = s.ActualIntegral
                                }).ToList().Count();

                    saleCount += query;
                }
                ListSaleByDept m = new ListSaleByDept();
                m.DeptName = itemDept.DeptName;
                m.SaleCount = saleCount;
                listSaleCountByDept.Add(m);
            }
            return Json(listSaleCountByDept);
        }



        [HttpPost]
        public ActionResult GetBusinessDept()
        {
            string pid = IDepartmentsR.Departments.FirstOrDefault(x => x.DeptName == "业务部").ID.ToString();
            var queryDept = IDepartmentsR.Departments.Where(x => x.ParentID == pid).OrderByDescending(x=>x.CreateTime).ToList();
            List<ListBusinessDept> listBusinessDept = new List<ListBusinessDept>();
            foreach (var item in queryDept)
            {
                ListBusinessDept m = new ListBusinessDept();
                m.DeptName = item.DeptName;
                listBusinessDept.Add(m);
            }
            return Json(listBusinessDept);
        }
make1828 2014-12-05
  • 打赏
  • 举报
回复
去看我之前做过项目的一例子吧,,,http://blog.csdn.net/make1828/article/details/41745513
make1828 2014-12-05
  • 打赏
  • 举报
回复
去看我之前做过项目的一例子吧,,,http://blog.csdn.net/make1828/article/details/41745513
wind_cloud2011 2014-12-04
  • 打赏
  • 举报
回复
series: [{ type: 'spline', name: '人数', marker: { symbol: 'url(images/02.png)' },data:<%= returnValue %> , yAxis: 0, color: '#FF9C23' }, { type: 'column', name: '分数', data:<%= returnValue1 %> , yAxis: 1, color: '#FFFFFF'}]  这样有曲线与柱状图
wind_cloud2011 2014-12-04
  • 打赏
  • 举报
回复
其中的DataTable dt 修改为你的数据库的数据就可
wind_cloud2011 2014-12-04
  • 打赏
  • 举报
回复
http://blog.csdn.net/zhengzhichen/article/details/6614600 ASP.NET中动态获取数据使用Highcharts图表控件

62,042

社区成员

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见,支持健康理性的辩论和互动,反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧