在dotnet highcharts的DRILLEDOWN PIE图表上叮叮当当地打开柱形图 [英] Opening a Column chart after clinking on DRILLEDOWN PIE Charts in dotnet highcharts

问题描述

我正在使用 Highsoft.Web.Mvc.Charts 。我有一个PIE图表，并且已经钻好了现在，我想在点击任何一点后打开一个柱状图钻下饼图。我查看的代码是

I am using Highsoft.Web.Mvc.Charts .I have a PIE chart and its drilled down NOW I want to open a column chart after clicking on any point of drilled down pie chart. My code in view is

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

感谢您提供任何帮助。

推荐答案

感谢 http://jsfiddle.net/nagoba/V4q69/1/

Got the answer as thanks to 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)                                                
                                        }
                                    }
                                }
                            }
                        }
                    },

这篇关于在dotnet highcharts的DRILLEDOWN PIE图表上叮叮当当地打开柱形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！