Highchart分组列向下钻取

Question

我正在尝试使用Highcharts开发GROUPED柱形图，我期望对其进行深入研究，就像我点击它应该向下钻取的类别一样。

柱状图中有多个可用钻取的示例，但没有示例适用于钻取的钻取的Grouped柱形图。

感谢任何帮助。

Answer 1

您可以通过将一系列序列值传递到highchart的.SetSeries函数来实现

public ActionResult ColumnWithDrilldown()
    {
        Data data = new Data(new[]
        {
             new SeriesData
            {
                Y = 55.6,
                Name = "Arabic",
                Drilldown = "Arabic"
            },

            new SeriesData
            {
                Y = 48.5,
                Name = "English",
                Drilldown = "English"
            }
        }
        );
        Data data1 = new Data(new[]
       {
            new SeriesData
            {
                Y = 50.1,
                Name = "Arabic",
                Drilldown = "Arabic1"
            },

            new SeriesData
            {
                Y = 60.5,
                Name = "English",
                Drilldown = "English1"
            }
        }
       );
        Data data2 = new Data(new[]
       {
             new SeriesData
            {
                Y = 63,
                Name = "Arabic",
                Drilldown = "Arabic2"
            },

            new SeriesData
            {
                Y = 80,
                Name = "English",
                Drilldown = "English2"
            }
        }
       );

        Drilldown drilldown = new Drilldown
        {
            Series = new[]
            {
                new Series
                {
                    Id = "Arabic",
                    Name = "test",
                    Data = new Data(new[]
                            {
                                new SeriesData
                                {
                                    Y = 10.85,
                                    Name = "Arabic 0.1",
                                    Drilldown = "Arabic0.1"
                                },
                                new SeriesData
                                {
                                    Y = 7.35,
                                    Name = "Arabic 0.2",
                                    Drilldown = "Arabic0.2"
                                }
                            })
                },
                new Series
                {
                    Id = "Arabic0.1",
                    Name = "Arabic0.11",
                    Data = new Data(new object[,] {{ "Arabic0.11", 10.85}, { "Arabic0.12", 7.35}})
                }
            }
        };

        Highcharts chart = new Highcharts("chart")
            .InitChart(new Chart { Type = ChartTypes.Column })
            .SetTitle(new Title { Text = "Browser market share, April, 2011" })
            .SetSubtitle(new Subtitle { Text = "Click the columns to view versions." })
            .SetXAxis(new XAxis { Type = AxisTypes.Category })
            .SetYAxis(new YAxis { Title = new YAxisTitle { Text = "Total percent market share" } })
            .SetLegend(new Legend { Enabled = false })
            .SetTooltip(new Tooltip
            {
                HeaderFormat = "<span style=\"font-size:11px\">{series.name}</span><br>",
                PointFormat = "<span style=\"color:{point.color}\">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>"
            })
            .SetPlotOptions(new PlotOptions
            {
                Column = new PlotOptionsColumn
                {
                    Stacking = Stackings.Normal,
                    BorderWidth = 0,
                    DataLabels = new PlotOptionsColumnDataLabels
                    {
                        Enabled = true,
                        Format = "{point.y:.1f}%",
                    }
                }
            })

            .SetSeries(new[]
            {
                new Series
                {
                    Name = "Browser brands",
                    Data =data,
                    Stack = "male"
                },
                new Series
                {
                    Name = "Browser brands1",
                    Data = data1,
                    Stack = "Fmale"
                },
                new Series
                {
                    Name = "Browser brands1",
                    Data = data2,
                    Stack = "Fmale1"
                }
            })
            .SetDrilldown(drilldown);
        return View(chart);
    }