highcharts+.net+mssql做柱状图，后台数据怎么绑定就可以查询到数据库查询结果

  
==========================
前台和后台怎么写，就可以查询到数据库的数据了。

8 个解决方案

#1

#2

查出来的数据做成控件接受的格式

#3

引用 2 楼 FoxDave 的回复:

查出来的数据做成控件接受的格式

可否说具体一点呢？

#4

巧了，我刚刚弄好这一块。。。

#5

首先，我创建了一个类，用来序列化成json格式用的，然后传递给前台用的(我这里是mvc的，所以最后直接return Json(ReportData)就可以了，如果你是webform那么你需要 newtonsoft.dll

public class ReportData
    {
        public string[] categories { get; set; }
        public List<ReportItem> ReportItems = new List<ReportItem>();

    }
    public class ReportItem
    {
        public string name { get; set; }
        public decimal?[] data { get; set; }
        public bool? sliced { get; set; }
        public bool? selected { get; set; }
        public decimal? y { get; set; }
    }

你的这个图，我也正好用了。
然后是去查询数据

public ReportData GetReprotData_Month(int WD_ProductSite_Id, DateTime? beginTime, DateTime? endTime)
        {
            //查询数据我就不贴出来了。q 就是查询到的数据
            ReportData reportData = new ReportData();
            reportData.categories = q.Select(x => x.createMonth).ToArray();

            ReportItem ri1 = new ReportItem() 
            { data = q.Select(x => x.AgentUsed).ToArray(), name = "Agent Used",selected=true,sliced=true };
            reportData.ReportItems.Add(ri1);

            ReportItem ri2 = new ReportItem() 
            { data = q.Select(x => x.Emission).ToArray(), name = "Emission"};
            reportData.ReportItems.Add(ri2);


            return reportData;
        }

这里是数据库通过存储过程，查询出的数据格式


前台绑定：

<h1 name="MainTitle" class="border_r3px main_list_h1" style="cursor: pointer;">pie-legend</h1>
        <div id="container1" name="container" style="min-width: 310px; height: 400px; margin: 0 auto;"></div>

ajax方法：

$.ajax({
            url: "IndexGetReportData_Month",
            type: "post",
            success: function (data) {
                columnBasic(data.categories, data.ReportItems);
            }
        });
//column-basic
    function columnBasic(categories, series)
    {
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Monthly Average Rainfall'
            },
            subtitle: {
                text: 'Source: WorldClimate.com'
            },
            xAxis: {
                categories: categories,
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Rainfall (mm)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: series
        });
    }

最后看一下效果

#6

#container  打错了，应该是#container1 额。。。

#7

引用 5 楼 hanjun0612 的回复:

首先，我创建了一个类，用来序列化成json格式用的，然后传递给前台用的(我这里是mvc的，所以最后直接return Json(ReportData)就可以了，如果你是webform那么你需要 newtonsoft.dll

public class ReportData
    {
        public string[] categories { get; set; }
        public List<ReportItem> ReportItems = new List<ReportItem>();

    }
    public class ReportItem
    {
        public string name { get; set; }
        public decimal?[] data { get; set; }
        public bool? sliced { get; set; }
        public bool? selected { get; set; }
        public decimal? y { get; set; }
    }

你的这个图，我也正好用了。
然后是去查询数据

public ReportData GetReprotData_Month(int WD_ProductSite_Id, DateTime? beginTime, DateTime? endTime)
        {
            //查询数据我就不贴出来了。q 就是查询到的数据
            ReportData reportData = new ReportData();
            reportData.categories = q.Select(x => x.createMonth).ToArray();

            ReportItem ri1 = new ReportItem() 
            { data = q.Select(x => x.AgentUsed).ToArray(), name = "Agent Used",selected=true,sliced=true };
            reportData.ReportItems.Add(ri1);

            ReportItem ri2 = new ReportItem() 
            { data = q.Select(x => x.Emission).ToArray(), name = "Emission"};
            reportData.ReportItems.Add(ri2);


            return reportData;
        }

这里是数据库通过存储过程，查询出的数据格式


前台绑定：

<h1 name="MainTitle" class="border_r3px main_list_h1" style="cursor: pointer;">pie-legend</h1>
        <div id="container1" name="container" style="min-width: 310px; height: 400px; margin: 0 auto;"></div>

ajax方法：

$.ajax({
            url: "IndexGetReportData_Month",
            type: "post",
            success: function (data) {
                columnBasic(data.categories, data.ReportItems);
            }
        });
//column-basic
    function columnBasic(categories, series)
    {
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Monthly Average Rainfall'
            },
            subtitle: {
                text: 'Source: WorldClimate.com'
            },
            xAxis: {
                categories: categories,
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Rainfall (mm)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: series
        });
    }

最后看一下效果

 看下你的私信我给你发了一条私信 还有些这方面的问题 请教一下你

#8

我也想知道怎么弄的最近一直在找这个