使用 ASP.NET MVC3 具有动态数据的堆叠分组直方图 HighCharts 图表？

Question

我想使用 HighCharts 和 ASP.NET MVC3 制作堆叠和分组直方图。 我在 HighCharts 网站上找到了这个示例： http://www.highcharts.com/ demo/column-stacked-and-grouped

我会在我的控制器中使用 JsonResult。 特别是，在上面的示例中，图形系列是在 javascript 中预定义的，而我将使用 JSON 动态创建它们。

Answer 1

使用 DonNet.Highcharts，您可以轻松地仅在服务器端创建 Highcharts。有堆叠和分组列的示例。这是服务器端代码：

Highcharts chart = new Highcharts("chart")
            .InitChart(new Chart { DefaultSeriesType = ChartTypes.Column })
            .SetTitle(new Title { Text = "Total fruit consumtion, grouped by gender" })
            .SetXAxis(new XAxis { Categories = new[] { "Apples", "Oranges", "Pears", "Grapes", "Bananas" } })
            .SetYAxis(new YAxis
                      {
                          AllowDecimals = false,
                          Min = 0,
                          Title = new YAxisTitle { Text = "Number of fruits" }
                      })
            .SetTooltip(new Tooltip { Formatter = "TooltipFormatter" })
            .SetPlotOptions(new PlotOptions { Column = new PlotOptionsColumn { Stacking = Stackings.Normal } })
            .SetSeries(new[]
                       {
                           new Series
                           {
                               Name = "John",
                               Data = new Data(new object[] { 5, 3, 4, 7, 2 }),
                               Stack = "male"
                           },
                           new Series
                           {
                               Name = "Joe",
                               Data = new Data(new object[] { 3, 4, 4, 2, 5 }),
                               Stack = "male"
                           },
                           new Series
                           {
                               Name = "Jane",
                               Data = new Data(new object[] { 2, 5, 6, 2, 1 }),
                               Stack = "female"
                           },
                           new Series
                           {
                               Name = "Janet",
                               Data = new Data(new object[] { 3, 0, 4, 4, 3 }),
                               Stack = "female"
                           }
                       });

您可以根据需要传递数据。