c# - dotnet highchart 错误，不显示数据

Question

我只是好奇如何根据数据库获取特定的数据列

string[] arrLabel = new string[dt.Rows.Count];
        Object[] data = new Object[dt.Rows.Count];
        Object[] dataDetail = new Object[dt.Rows.Count];
        String[] detail = new String[dt.Rows.Count];

        var returnObject = new List<object>();
        var returnColumnList = new List<object>();
        int i = 0;

        foreach (DataRow item in dt.Rows)
        {

            for (int j = 0; j < 1; j++)
            {
                returnColumnList.Add(new object[] {item["ATT_WF_STATUS_2"], item["ATT_WF_STATUS_3"]});
            }

            dataDetail = returnColumnList.ToArray();
            returnObject.Add(new object[] { item["DEPARTEMENT"],dataDetail[i]});
            arrLabel[i] = ((string)item["DEPARTEMENT"]);
            i++;
        }



        data = returnObject.ToArray();


        this.data = data;
        this.arrLabel = arrLabel;

然而，使用dotnet 的图形并没有显示，而是像这样。

当我使用浏览器检查元素时

    $(document).ready(function() {
    chartColumnDetail = new Highcharts.Chart({
        chart: { renderTo:'chartColumnDetail_container', options3d: { alpha: 10, beta: 0, depth: 50, enabled: true, viewDistance: 25 }, plotShadow: false, type: 'column' }, 
        credits: { enabled: false }, 
        legend: { enabled: true, itemStyle: { color: '#2C3E50' } }, 
        plotOptions: { column: { allowPointSelect: true, colorByPoint: true, cursor: 'pointer', dataLabels: { enabled: true, style: { font:'14px', fontWeight:'bold' } }, depth: 50, showInLegend: true } }, 
        subtitle: { text: 'Grouped by Status' }, 
        title: { text: 'Attendance Analytics From 01 January 2010 Until 15 December 2016' }, 
        tooltip: { formatter: function(){ var sliceIndex =this.point.index; var sliceName = this.series.chart.axes[0].categories[sliceIndex]; return 'The value for <b>' + this.point.name + '</b> is <b>' + this.y +'</b>';} }, 
        xAxis: { categories: ['DO-Advisory Department', 'EDP Department', 'Enterprise Infrastructure Services Department', 'Pre Sales Department', 'Sales Department 1', 'IO-DCOPS Department', 'Human Capital Department'], labels: { align: 'center', style: { font: 'bold 10px Verdana,sans-serif' } } }, 
        yAxis: { min: 0, title: { text: 'Amount' } }, 
        exporting: { buttons: { contextButton: { align: 'center', x: 350, y: -3 } }, enabled: true, scale: 5 }, 
        series: [{ data: [['DO-Advisory Department', [15, 32]], ['EDP Department', [26, 5]], ['Enterprise Infrastructure Services Department', [8, 1]], ['Pre Sales Department',[ 1, 6]], ['Sales Department 1', [1, 3]], ['IO-DCOPS Department',[ 1, 0]], ['Human Capital Department',[1, 0]], name: 'Department' }]
    });
});

有什么办法可以解决这个问题吗？非常感谢

更新:我从具有类似条件的 sql 数据库中获取此信息 enter image description here

另一个更新:这是这个案例的完整编码

protected DataTable GetDataDetail()
    {
        SortedList sl = new SortedList();

        DateTime dateFrom = DateTime.ParseExact(Request.Form[txtOldDate.UniqueID], "yyyy-MM-dd", null);
        DateTime dateTo = DateTime.ParseExact(Request.Form[txtNewDate.UniqueID], "yyyy-MM-dd", null);
        sl.Add("@DATE_FROM-date", dateFrom);
        sl.Add("@DATE_TO-date", dateTo);

        DataTable dt = new DataTable();

        dateFromChart = dateFrom.ToString("dd MMMM yyyy", CultureInfo.InvariantCulture);
        dateToChart = dateTo.ToString("dd MMMM yyyy", CultureInfo.InvariantCulture);

        dt = bll.GetAttendanceAnalyticsBasedWfStatus(sl);

        string[] arrLabel = new string[dt.Rows.Count];
        Object[] data = new Object[dt.Rows.Count];
        Object[] dataDetail = new Object[dt.Rows.Count];

        var returnObject = new List<object>();
        List<object[]> returnColumnList = new List<object[]>();

        int i = 0;
        foreach (DataRow item in dt.Rows)
        {

            for (int j = 0; j < 1; j++)
            {
                returnColumnList.Add(new object[] { item["DEPARTEMENT"], item["ATT_WF_STATUS_2"], item["ATT_WF_STATUS_3"] });
            }

            dataDetail = returnColumnList.ToArray();

            returnObject.Add(new object[] { returnColumnList.Select(b => new { name = b.GetValue(0), data = returnColumnList.Select(y => y.GetValue(1) + "," + y.GetValue(2)).ToArray() }).ToArray() });

            arrLabel[i] = ((string)item["DEPARTEMENT"]);
            i++;
        }

        jsonSeries = new JavaScriptSerializer().Serialize(returnObject);
        Response.Write(jsonSeries);
        data = returnObject.ToArray();

        this.data = data;
        this.arrLabel = arrLabel;

        return dt;
    }

然后是点网图

protected void ColumnChartDetail()
    {
        GetDataDetail();

        //Binding data to Chart
        DotNet.Highcharts.Highcharts chartColumnDetail = new DotNet.Highcharts.Highcharts("chartColumnDetail").InitChart(new Chart
        {
            DefaultSeriesType = ChartTypes.Column
        })

            .SetOptions(new GlobalOptions
            {
                Colors = new[] { 
                    ColorTranslator.FromHtml("#50B432"),   //using system.drawing
                    ColorTranslator.FromHtml("#ED561B"),
                    ColorTranslator.FromHtml("#DDDF00"),
                    ColorTranslator.FromHtml("#24CBE5"),
                    ColorTranslator.FromHtml("#64E572"),
                    ColorTranslator.FromHtml("#FF9655"),
                    ColorTranslator.FromHtml("#34495E"),
                    ColorTranslator.FromHtml("#6AF9C4")
                }

            })

            //set title 
            .SetTitle(new Title
            {
                Text = "Attendance Analytics From " + this.dateFromChart + " Until " + this.dateToChart,
            })

            //set subtitle
            .SetSubtitle(new Subtitle
            {
                Text = "Grouped by Status",
            })

            //set tooltip
            .SetTooltip(new Tooltip
            {
                Formatter = @"function(){ var sliceIndex =  this.point.index; var sliceName = this.series.chart.axes[0].categories[sliceIndex]; return 'The value for <b>' + this.point.name + '</b> is <b>' + this.y +'</b>';}"
            })

            //Exporting options
            .SetExporting(new Exporting
            {
                Enabled = true,
                Scale = 5,
                Buttons = new ExportingButtons
                {
                    ContextButton = new ExportingButtonsContextButton
                    {
                        Align = HorizontalAligns.Center,
                        X = 350,
                        Y = -3
                    }
                }
            })

            //set plot option 
            .SetPlotOptions(new PlotOptions
            {
                Column = new PlotOptionsColumn
                {
                    AllowPointSelect = true,
                    Depth = 50,
                    DataLabels = new PlotOptionsColumnDataLabels
                    {
                        Enabled = true,
                        Style = "font:'14px', fontWeight:'bold'"

                    },
                    ShowInLegend = true,
                    ColorByPoint = true,
                    Cursor = Cursors.Pointer,
                }
            })


            //set chart initial
            .InitChart(new Chart
            {
                Type = ChartTypes.Column,
                PlotBackgroundColor = null,
                PlotBorderWidth = null,
                PlotShadow = false,
                Options3d = new ChartOptions3d     // options for 3D
                {
                    Enabled = true,
                    Alpha = 10,
                    Beta = 0,
                    Depth = 50,
                    ViewDistance = 25
                }
            })

            //set xAxis formatter text
            .SetXAxis(new XAxis
            {
                Categories = arrLabel,
                Labels = new XAxisLabels
                {
                    Style = "font: 'bold 10px Verdana,sans-serif'",
                    Align = HorizontalAligns.Center
                }

            })

            //set yAxis formater text
            .SetYAxis(new YAxis
            {
                Min = 0,
                Title = new YAxisTitle { Text = "Amount" }
            })

            //remove watermark of highcharts
            .SetCredits(new Credits
            {
                Enabled = false
            })

            //set Legend
            .SetLegend(new Legend
            {
                Enabled = true,
                ItemStyle = "color: '#2C3E50'"
            })


            //set Series 
            .SetSeries(new[]
            {
                 new Series 
                {   
                    Name = "Department",
                    Data = new Data(data)
                },

            });

        chartContainerColumnDetail.Text = chartColumnDetail.ToHtmlString();

    }

添加代码后，结果变成这样

[[[{"name":"DO-Advisory Department","data":["15,32"]}]],[[{"name":"DO-Advisory Department","data":["15,32","11,18"]},{"name":"EDP Department","data":["15,32","11,18"]}]],[[{"name":"DO-Advisory Department","data":["15,32","11,18","8,1"]},{"name":"EDP Department","data":["15,32","11,18","8,1"]},{"name":"Enterprise Infrastructure Services Department","data":["15,32","11,18","8,1"]}]],[[{"name":"DO-Advisory Department","data":["15,32","11,18","8,1","1,6"]},{"name":"EDP Department","data":["15,32","11,18","8,1","1,6"]},{"name":"Enterprise Infrastructure Services Department","data":["15,32","11,18","8,1","1,6"]},{"name":"Pre Sales Department","data":["15,32","11,18","8,1","1,6"]}]],[[{"name":"DO-Advisory Department","data":["15,32","11,18","8,1","1,6","1,3"]},{"name":"EDP Department","data":["15,32","11,18","8,1","1,6","1,3"]},{"name":"Enterprise Infrastructure Services Department","data":["15,32","11,18","8,1","1,6","1,3"]},{"name":"Pre Sales Department","data":["15,32","11,18","8,1","1,6","1,3"]},{"name":"Sales Department 1","data":["15,32","11,18","8,1","1,6","1,3"]}]],[[{"name":"DO-Advisory Department","data":["15,32","11,18","8,1","1,6","1,3","1,0"]},{"name":"EDP Department","data":["15,32","11,18","8,1","1,6","1,3","1,0"]},{"name":"Enterprise Infrastructure Services Department","data":["15,32","11,18","8,1","1,6","1,3","1,0"]},{"name":"Pre Sales Department","data":["15,32","11,18","8,1","1,6","1,3","1,0"]},{"name":"Sales Department 1","data":["15,32","11,18","8,1","1,6","1,3","1,0"]},{"name":"IO-DCOPS Department","data":["15,32","11,18","8,1","1,6","1,3","1,0"]}]],[[{"name":"DO-Advisory Department","data":["15,32","11,18","8,1","1,6","1,3","1,0","1,0"]},{"name":"EDP Department","data":["15,32","11,18","8,1","1,6","1,3","1,0","1,0"]},{"name":"Enterprise Infrastructure Services Department","data":["15,32","11,18","8,1","1,6","1,3","1,0","1,0"]},{"name":"Pre Sales Department","data":["15,32","11,18","8,1","1,6","1,3","1,0","1,0"]},{"name":"Sales Department 1","data":["15,32","11,18","8,1","1,6","1,3","1,0","1,0"]},{"name":"IO-DCOPS Department","data":["15,32","11,18","8,1","1,6","1,3","1,0","1,0"]},{"name":"Human Capital Department","data":["15,32","11,18","8,1","1,6","1,3","1,0","1,0"]}]]]

Answer 1

更新 2:

你能像这样形成数据结果吗:

     List<object[]> returnColumnList = new List<object[]>();
string json = string.Empty;
var returnObject = new List<object>();
returnColumnList.Add(new object[]  { "Depart" , "123", "345"  });
returnColumnList.Add(new object[] { "Depart", "123", "345" });

foreach (var item in returnColumnList)
{

returnObject.Add(new {name = item.GetValue(0), data = (new object[] {item.GetValue(1) , item.GetValue(2)})});

}

json = new JavaScriptSerializer().Serialize(returnObject);

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

1. 列表项

系列设置不正确。

请这样做:

series: [{
            name: 'DO-Advisory Department',
            data: [15, 32]
        }, {
            name: 'EDP Department',
            data: [26, 5]
        }, {
            name: 'Enterprise Infrastructure Services Department',
            data: [8, 1]
        }]

已附上结果图片。