Highcharts C＃To 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軸。

我已經嘗試了幾個這方面的最新版本，最新的一個是創建一個自定義對象，將該月的某一天作為一個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字符串以供高圖表使用。 我已經設法使用下面的javascript將這個版本的工作在highcharts中，而不是在堆疊列中，但這對我來說並不是很好

 <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
                             }
                      }]    
                  });  
                });  

順便說一句，我在webforms工作（最終將轉換為MVC :)

ps如果更容易進入以下格式，則可以編輯數據：

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

Answer 1

你的問題有點不清楚。 你最終的情節調用與我在你的情節中你想要的不一致 - 兩個系列，一個用於Bob，一個用於Tim。

因此，讓我們從基礎開始，使用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 %>
});

這創造了：