Открытие диаграммы столбцов после щелчка на круговых диаграммах DRILLEDOWN в старших чартах - PullRequest
Новая
       31

Открытие диаграммы столбцов после щелчка на круговых диаграммах DRILLEDOWN в старших чартах

0 голосов
/ 05 июня 2018

Я использую Highsoft.Web.Mvc.Charts. У меня есть круговая диаграмма, и она развернута вниз. Я хочу открыть столбчатую диаграмму после нажатия на любую точку развернутой круговой диаграммы.Мой код: 

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
@using Highsoft.Web.Mvc.Charts
@{
    Highcharts chart2 = new Highcharts
    {
        Title = new Title
        {
            Text = "Total Pages Accessed by Teams"
        },
        Subtitle = new Subtitle
        {
            Text = "RiO."
        },

        XAxis = new List<XAxis>
            {
                new XAxis
                {
                    Type = XAxisType.Category
                }
            },
        YAxis = new List<YAxis>
            {
                new YAxis
                {
                    Title = new YAxisTitle
                    {
                        Text = "Total percent market share"
                    }
                }
            },
        Legend = new Legend
        {
            Enabled = false
        },
        Tooltip = new Tooltip
        {
            HeaderFormat = "<span style='font-size:11px'>{series.name}</span><br>",
            PointFormat = "<span style=\"color:{point.color}\">{point.name}</span>: <b>{point.y}</b> Pages<br/>"
        },

        PlotOptions = new PlotOptions
        {
            Series = new PlotOptionsSeries
            {
                DataLabels = new PlotOptionsSeriesDataLabels
                {
                    Enabled = true,
                    Format = "{point.name}: {point.y}"
                },
                Cursor = PlotOptionsSeriesCursor.Pointer,

                Point = new PlotOptionsSeriesPoint
                {
                    Events =  new PlotOptionsSeriesPointEvents
                    {                        
                    }
                }

            }
        },
        Series = new List<Series>
            {
                new PieSeries
                {
                    Name = "Teams data",
                    Data = @ViewData["pieData"] as List<PieSeriesData>
                }
            },
        Drilldown = new Drilldown
        {
            Series = @ViewData["Series"] as List<Series>
        }

    };

}
@Html.Highsoft().GetHighcharts(chart2, "chart2")

Заранее благодарен за любую помощь.

1 Ответ

0 голосов
/ 06 июня 2018

Получил ответ благодаря http://jsfiddle.net/nagoba/V4q69/1/

 plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                color: '#000000',
                                connectorColor: '#000000',
                                formatter: function () {
                                    return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
                                }
                            },
                            point: {
                                events: {    
                                    click: function () {
                                        if (this.x != "" && this.x != null) 
                                            drawColumnGraph(this.name)                                                
                                        }
                                    }
                                }
                            }
                        }
                    },
...