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 :)

P.S。如果更容易采用以下格式，则可以编辑数据：

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

创造了：

enter image description here

Highcharts C＃To JSON - 构建系列数据

1 个答案: