Highcharts C# 到 JSON - 结构化系列数据

Question

我对此有点卡住了，我正在尝试创建一个 highcharts 堆叠列，并且正在兜圈子试图让系列正确，我已将我的数据从 sql server 拉到数据表中，它在一个支点类型格式（如果有更好的方法可以更改），数据格式如下，因为它使用了sql server的pivot函数：

name 1 2 3 4 5 6 7 8 9 10
Bob  4 5 6 7 8 9 9 9 0 0
tim  4 5 6 7 4 3 2 5 6 3 

顶部的数字是月份中的日期，我想在名称上堆叠柱形图，x 轴是月份中的日期，实际值是 y 轴。

我已经尝试了几个 permiatations，最新的一个是创建一个自定义对象，将月份中的日期作为 int 数组。基本上我不知道如何将其转移到 highcharts 堆叠列中

我认为生成的 JSON 应该如下所示：

{
    name: Bob
    Valie [4,5,6,7,8,9,9,9,0,0]

    name: tim
    Value: [4,5,6,7,4,3,2,5,6,3]
}

我可以使用 JSON.net 将列表序列化为 json 对象，但在尝试生成其中包含 int 数组的结果 JSON 时，我总是摔倒。

有没有人有任何最佳实践建议，或者我可能把这一切都弄错了，而且把我不知道的事情复杂化了。下面是我最新的一个事件，它只是我的最新事件，它是老实说有点黑客和削减的结果。

public class ChartData
    {
        public string Name { get; set; }
        public int Data { get; set; }
       // public int DayNumber { get; set; }

    }

protected void RenderChart()
    {

        List<int> _data = new List<int>();
        List<int> _data1 = new List<int>();
        List<string> _data2 = new List<string>();
        foreach (DataRow dr1 in resultsByDay.Rows)
        {
            _data.Add((int)dr1["Total"]);  //column name 
            _data1.Add((int)dr1["DayNumber"]);


            //_data.Add(new ChartData() { Data = ((int)dr1["Total"]) });
           // _data.Add(new Data() { DayNumber = ((int)dr1["DayNumber"]) });


        }
        //JavaScriptSerializer jss = new JavaScriptSerializer();
        //chartData = jss.Serialize(_data); //this make your list in jSON format like [88,99,10]
        //chartData1 = jss.Serialize(_data1);
        //chartData2 = jss.Serialize(_data2);

        JsonSerializer mySerializer = new JsonSerializer();

        chartData = JsonConvert.SerializeObject(_data);
        chartData1 = JsonConvert.SerializeObject(_data1);
        chartData2 = JsonConvert.SerializeObject(_data2);
    }

我的想法是 int 需要更改为 int[] 但有点不确定如何构造列表以便 JSON.net 可以将其转换为可爱的 JSON 字符串以供 highcharts 使用。我已经设法让这个版本在 highcharts 中工作，而不是使用下面的 javascript 在堆叠列中，但这对我来说并不是很好

 <script type="text/javascript">  

                 $(function () {  
                 $('#chartContainer').highcharts({
                       chart: {  
                           type: 'column' },  
                       title: {  
                       text: '' },  
                      subtitle: {  
                      text: ''},  
                      xAxis: {  
                      title: {  
                       text: "Total Output Per Day"
                                    }, 
                            labels:{
                           rotation:-25,
                           y:50 },
                     categories: <%= chartData1%>  },  
                     yAxis: {  
                            linewidth : 10,
                            gridLineWidth: 0,
                            min: 0,  
                            title: {  
                            text: 'Total'  
                      }
                    },  
                    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} </b></td></tr>',  
                         footerFormat: '</table>',  
                         shared: true,  
                         useHTML: true  
                    },  
                     plotOptions: {  
                           column: {  
                           pointPadding: 0.2,  
                           borderWidth: 0 ,
                           //stacking: 'normal'
                      }
                },series: [{
                    name: "Total",
                    data: <%= chartData%>,
                dataLabels: {
                             enabled: true,
                             rotation: -90,
                                color: '#FFFFFF',
                             align: 'center',
                             x:5,
                             y:10
                             }
                      }]    
                  });  
                });  

顺便说一句，我在网络表单中工作（最终将转换为 MVC :)

附言如果更容易将数据编辑为以下格式：

Name DayNumber Total
Bob      1       5
Tim      1       10
bob      2       6
tim      2       8
bob      3       9
tim      3       5

Answer 1

你的问题有点不清楚。你最终的情节调用与我假设你想要的情节不符 - 两个系列，一个给鲍勃，一个给蒂姆。

让我们从基础开始，使用 JSON 将您的数据库数据放入 Highchart 系列对象的数组中：

假设您从数据库返回的第一个数据结构：

name 1 2 3 4 5 6 7 8 9 10
Bob  4 5 6 7 8 9 9 9 0 0
tim  4 5 6 7 4 3 2 5 6 3 

这个：

List<Dictionary<string, object>> allSeries = new List<Dictionary<string,object>>();
foreach (DataRow dr1 in table.Rows)
{
    Dictionary<string, object> aSeries = new Dictionary<string,object>();
    aSeries["name"] = dr1["name"];
    aSeries["data"] = new List<int>();
    int N = dr1.ItemArray.Length;
    for (int i = 1; i < N; i++)
    {
        ((List<int>)aSeries["data"]).Add((int)dr1[i]);
    }
    allSeries.Add(aSeries);
}
string jsonSeries = Newtonsoft.Json.JsonConvert.SerializeObject(allSeries);

在 jsonSeries 字符串变量中产生：

[{"name":"Bob","data":[4,5,6,7,8,9,9,9,0,0]},{"name":"Tim","data":[4,5,6,7,4,3,2,5,6,3]}]

这对于 Highcharts 是一系列系列对象的数组。

然后您可以在 Highcharts 调用中将其用作：

$('#chartContainer').highcharts({
    chart: {  
        type: 'column' 
    },  
    series: <%= jsonSeries %>
});

创建：