Диаграммы в ASP.Net MVC 3

Question

Я использую веб-помощник Chart в ASP.Net MVC 3. В Интернете я видел ряд ярких изображений, демонстрирующих возможности этого API, но вряд ли есть документация о том, как стилизовать диаграммы. Например, мне нужно отображать метки вне графика, я хотел бы указать процент, а не десятичные значения и т. Д.

Для загрузки имеется проект веб-форм: http://weblogs.asp.net/scottgu/archive/2010/02/07/built-in-charting-controls-vs-2010-and-net-4-series.aspx и очень простая документация по классам, в которой объясняется, как назначать значения и задавать базовые измерения.

Я понимаю, что еще не было опубликовано ни одной книги по MVC 3, но наверняка должна быть какая-то документация, объясняющая, как использовать инструмент?

Спасибо

EDIT:

Из того, что я прочитал, ASP.Net MVC 3 либо сделал шаг назад с помощью инструмента создания диаграмм, удалив возможность стилизовать диаграммы, либо он вообще не был задокументирован. Наткнулся на эту статью: http://forums.asp.net/t/1620783.aspx/1?ASP+NET+MVC+3+Beta+Chart+Helper+Styling+Please+Help+, там описана очень похожая проблема.

РЕДАКТИРОВАТЬ 2: Похоже, что Microsoft частично реализовала функциональность MSCharts в MVC 3. Чтобы использовать MSCharts, сборка System.Web.DataVisualization должна быть импортирована и зарегистрирована в файле web.configuration. Т * * тысяча двадцать-один

Таким образом, запросы отправляются из представления на контроллеры. Контроллеры генерируют изображение графика и возвращают результат изображения. Результат затем отображается в представлении. Это полезно, так как обеспечивает разделение. Я до сих пор не понимаю, почему System.WebHelpers.Chart еще не предлагает эту функциональность, но, надеюсь, она будет решена в ближайшем будущем.

РЕДАКТИРОВАТЬ 3: Еще несколько моментов. Не создавайте свои графики в представлении - они должны обслуживаться контроллером. Если вы решили использовать представления для построения графиков, убедитесь, что вы обновили файл web.config в папке Views, чтобы включить <add namespace="System.Web.UI.DataVisualization"/> в раздел пространства имен. Названия сборок и пространств имен немного сбивают с толку. Сборка называется: System.Web.DataVisualization, когда пространство имен называется System.Web.UI.DataVisualization. Наконец, я думаю, что API для построения графиков великолепен, он обслуживает изображения, что означает, что графики будут доступны из всех веб-браузеров. Качество графиков отличное. Я рассмотрел такие альтернативы, как Fusion Charts, HighCharts и несколько других диаграмм на основе jQuery / JavaScript / Flash. Все они пытаются отобрать у вас 300–1000 фунтов, не пытаясь удовлетворить самые элементарные потребности разработчиков.

Answer 1

Элементы управления диаграммой основаны на ранее отдельном проекте MS Chart.

Блог Алекса Горева (ведущий разработчик MSFT для проекта): http://blogs.msdn.com/b/alexgor/

Форумы MS Chart: http://social.msdn.microsoft.com/Forums/en-US/MSWinWebChart/

Документация по MSDN: http://msdn.microsoft.com/en-us/library/dd456632(VS.100).aspx

Посты кажутся немного устаревшими, но API практически одинаков между MS Chart и новыми библиотеками визуализации данных.

Чтобы ответить на ваши примеры вопросов:

1) Для отображения меток вне диаграммы каждый объект Series имеет массив свойств словаря.

series["PieLabelStyle"] = "Outside";

2) Чтобы указать проценты, а не необработанные значения, свойство Label объекта Series принимает строку форматирования.

series.Label = "#PERCENT{P0}"

Эти пользовательские атрибуты доступны подробно на http://msdn.microsoft.com/en-us/library/dd456764.aspx.

РЕДАКТИРОВАТЬ: Пример добавления кода

Хорошо, вот полный пример кода. Я использую System.Web.DataVisualization v4.0.0.0, так что это должно быть актуально для MVC 3. Перечисленные выше series не являются фактическими Chart.Series свойствами (это SeriesCollection). Это личность series, которую вы добавляете в эту коллекцию.

public ActionResult TestForSOExample()
{
  // slug in some data
  var data = new Dictionary<string, float>
        {
            {"test", 10.023f},
            {"test2", 20.020f},
            {"test3", 19.203f},
            {"test4", 4.039f},
            {"test5", 5.343f}
    };


  var chart = new Chart();

  var area = new ChartArea();
  // configure your chart area (dimensions, etc) here.
  chart.ChartAreas.Add(area);

  // create and customize your data series.
  var series = new Series();
  foreach (var item in data)
  {
        series.Points.AddXY(item.Key, item.Value);
    }
  series.Label = "#PERCENT{P0}";
  series.Font = new Font("Segoe UI", 8.0f, FontStyle.Bold);
  series.ChartType = SeriesChartType.Pie;
  series["PieLabelStyle"] = "Outside";

  chart.Series.Add(series);

  var returnStream = new MemoryStream();
  chart.ImageType = ChartImageType.Png;
  chart.SaveImage(returnStream);
  returnStream.Position = 0;
  return new FileStreamResult(returnStream, "image/png");
}

Когда вы вызываете действие контроллера, вы видите следующие изображения.

Answer 2

Я бы порекомендовал визуализировать диаграммы на клиенте, а не на сервере, который на самом деле должен использоваться для извлечения данных.Я бы использовал что-то вроде Google Maps для этого.Но если вы действительно решили получить графики с сервера, а точнее изображения, то проще всего использовать описанный выше подход - класс Chart.Но один из недостатков этого подхода заключается в том, что для этого нет дизайнера, но на самом деле, как я обнаружил, если вы создаете приложение WinForms и перетаскиваете элемент управления Charts, он точно такой же, и для этого есть дизайнер, все вынеобходимо скопировать / вставить сгенерированный дизайнером код и написать некоторую логику обработки, если это необходимо.Это делает жизнь намного проще.