Создание пирога (старшие диаграммы) с использованием определенной таблицы HTML

Question

Я хотел бы добавить серию в круговую диаграмму, я создал для этого функцию JS:

Answer 1

Другим простым способом работы с Highcharts и ASP.NET является использование библиотеки DotNet.Highcharts .Вот пример с круговой диаграммой:

Highcharts chart = new Highcharts("chart")
            .InitChart(new Chart { PlotShadow = false })
            .SetTitle(new Title { Text = "Browser market shares at a specific website, 2010" })
            .SetTooltip(new Tooltip { Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; }" })
            .SetPlotOptions(new PlotOptions
                            {
                                Pie = new PlotOptionsPie
                                      {
                                          AllowPointSelect = true,
                                          Cursor = Cursors.Pointer,
                                          DataLabels = new PlotOptionsPieDataLabels
                                                       {
                                                           Color = ColorTranslator.FromHtml("#000000"),
                                                           ConnectorColor = ColorTranslator.FromHtml("#000000"),
                                                           Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; }"
                                                       }
                                      }
                            })
            .SetSeries(new Series
                       {
                           Type = ChartTypes.Pie,
                           Name = "Browser share",
                           Data = new Data(new object[]
                                           {
                                               new object[] { "Firefox", 45.0 },
                                               new object[] { "IE", 26.8 },
                                               new Point
                                               {
                                                   Name = "Chrome",
                                                   Y = 12.8,
                                                   Sliced = true,
                                                   Selected = true
                                               },
                                               new object[] { "Safari", 8.5 },
                                               new object[] { "Opera", 6.2 },
                                               new object[] { "Others", 0.7 }
                                           })
                       });

Результат этого кода такой же, как на демонстрации старших графиков: http://www.highcharts.com/demo/pie-basic

В случае вызова функции JavaScript при нажатии наНа графике вы можете сделать это просто так:

Pie = new PlotOptionsPie
                {
                    Point = new PlotOptionsPiePoint
                            {
                                Events = new PlotOptionsPiePointEvents
                                         {
                                             Click = "OnPiePointClick"
                                         }
                            }

... или, если это простая функция, вы можете добавить ее напрямую:

Click = "function() { alert (this.category +': '+ this.y); }"

Для полного кода или для болееПирог примеры скачать пример проекта: http://dotnethighcharts.codeplex.com/releases/view/80650

Answer 2

Поскольку вы, похоже, используете ASP .Net, возможно, вам следует попробовать Highcharts.Net . Библиотека C # позволяет вам создавать Highcharts без какого-либо написания кода JavaScript, все, что вы пишете, это код C # в файле codebehind. Это особенно полезно, если вы извлекаете данные из источника данных SQL.

На самом деле, извлечение данных из источника SQL обсуждалось здесь , и если вы хотите получить образец для использования круговой диаграммы, вы всегда можете скачать пример проекта, содержащий примеры из здесь

Answer 3

Вам нужно иметь div на html-странице с идентификатором container, чтобы перетащить диаграмму в (из-за этой строки в вашей конфигурации диаграммы: renderTo: 'container'. Форумы Highcharts очень полезны для поддержки Highcharts.

При отладке я попытался бы сначала вынуть диаграмму из страницы asp и просто сгенерировать ее в striaghtforward html, будет легче увидеть, что происходит не так