Как вставить диаграмму на сайт

var options = <
title: 'My Daily Activities'
>;

var chart = new google.visualization.PieChart(document.getElementById('piechart'));

chart.draw(data, options);
>

Если его вставить в страницу, все работает. Но как сделать так, что бы на странице были 3 таких диаграммы? Ничего не получается. Пробовал и id менять, и код копировать, не вторая не 3 диаграмма не отображается. Подскажите, пожалуйста решение.

• Спрашиваем и отвечаем по Elementor пожалуй лучшему конструктору страниц на WordPress
• Вопросы представителю Яндекса
• Перенаправление домена

На сайте с 04.11.2007

16 февраля 2016, 06:27

.

var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);

var chart2 = new google.visualization.PieChart(document.getElementById('piechart2'));
chart2.draw(data, options);

var chart3 = new google.visualization.PieChart(document.getElementById('piechart3'));
chart3.draw(data, options);
>

Отображение данных на диаграмме с помощью веб-страницы ASP.NET (Razor)

Примечание

Сведения в этой статье относятся к веб-страницы ASP.NET 1.0 и веб-страницам 2.

Вспомогатель диаграммы

Если вы хотите отобразить данные в графическом виде, можно использовать Chart вспомогательное средство. Вспомогательный Chart элемент может отрисовыть изображение, отображающее данные в различных типах диаграмм. Он поддерживает множество вариантов форматирования и маркировки. Вспомогательный Chart инструмент может отрисовывать более 30 типов диаграмм, включая все типы диаграмм, с которыми вы знакомы из Microsoft Excel или других инструментов — диаграммы с областями, линейчатые диаграммы, гистограммы, графики и круговые диаграммы, а также более специализированные диаграммы, такие как фондовые диаграммы.

	Описание линейчатой
Описание гистограммы	Описание графика"
Описание круговой	Описание биржевой"

Элементы диаграммы

На диаграммах отображаются данные и дополнительные элементы, такие как условные обозначения, оси, ряды и т. д. На следующем рисунке показаны многие элементы диаграммы, которые можно настроить при использовании вспомогательного Chart средства. В этой статье показано, как задать некоторые (не все) из этих элементов.

Создание диаграммы на основе данных

Данные, отображаемые на диаграмме, могут быть из массива, из результатов, возвращаемых из базы данных, или из данных, которые есть в XML-файле.

Использование массива

Как описано в статье Введение в веб-страницы ASP.NET программирование с помощью синтаксиса Razor, массив позволяет хранить коллекцию похожих элементов в одной переменной. Массивы можно использовать для хранения данных, которые необходимо включить в диаграмму.

В этой процедуре показано, как создать диаграмму на основе данных в массивах, используя тип диаграммы по умолчанию. Здесь также показано, как отобразить диаграмму на странице.

1. Создайте файл с именем ChartArrayBasic.cshtml.
2. Замените существующее содержимое следующим:

@< var myChart = new Chart(width: 600, height: 400) .AddTitle("Chart Title") .AddSeries( name: "Employee", xValue: new[] < "Peter", "Andrew", "Julie", "Mary", "Dave" >, yValues: new[] < "2", "6", "4", "5", "3" >) .Write(); > 

Код сначала создает новую диаграмму и задает ее ширину и высоту. Заголовок диаграммы можно указать с помощью AddTitle метода . Чтобы добавить данные, используйте AddSeries метод . В этом примере используются name параметры AddSeries , xValue и yValues метода . Параметр name отображается в условных обозначениях диаграммы. Параметр xValue содержит массив данных, отображаемых вдоль горизонтальной оси диаграммы. Параметр yValues содержит массив данных, используемый для построения вертикальных точек диаграммы. Метод Write фактически отрисовывает диаграмму. В этом случае, так как вы не указали тип диаграммы, вспомогательное Chart средство отрисовывает диаграмму по умолчанию, которая является гистограммой.

Использование запроса базы данных для данных диаграммы

Если данные, которые требуется на диаграмме, содержатся в базе данных, можно выполнить запрос к базе данных, а затем использовать данные из результатов для создания диаграммы. В этой процедуре показано, как считывать и отображать данные из базы данных, созданной в статье Введение в работу с базой данных на сайтах веб-страницы ASP.NET.

1. Добавьте папку App_Data в корень веб-сайта, если папка еще не существует.
2. В папку App_Data добавьте файл базы данных с именем SmallBakery.sdf, описанный в разделе Общие сведения о работе с базой данных на сайтах веб-страницы ASP.NET.
3. Создайте файл с именем ChartDataQuery.cshtml.
4. Замените существующее содержимое следующим:

Код сначала открывает базу данных SmallBakery и назначает ее переменной с именем db . Эта переменная представляет Database объект , который можно использовать для чтения из базы данных и записи в нее. Затем код выполняет SQL-запрос, чтобы получить имя и цену каждого продукта. Код создает новую диаграмму и передает ей запрос базы данных путем вызова метода диаграммы DataBindTable . Этот метод принимает два параметра: dataSource параметр предназначен для данных из запроса, а xField параметр позволяет задать столбец данных, используемый для оси X диаграммы. В качестве альтернативы использованию DataBindTable метода можно использовать AddSeries метод вспомогательного Chart средства. Метод AddSeries позволяет задать xValue параметры и yValues . Например, вместо того, чтобы использовать метод, подобный следующему DataBindTable :

.DataBindTable(data, "Name") 

Метод можно использовать AddSeries следующим образом:

.AddSeries("Default", xValue: data, xField: "Name", yValues: data, yFields: "Price") 

Оба отображают одинаковые результаты. Метод AddSeries является более гибким, так как вы можете указать тип диаграммы и данные более явно, но DataBindTable метод проще использовать, если вам не требуется дополнительная гибкость.

Использование XML-данных

Третий вариант создания диаграммы — использовать XML-файл в качестве данных для диаграммы. Для этого требуется, чтобы XML-файл также был файл схемы (XSD-файл ), описывающий структуру XML. В этой процедуре показано, как считывать данные из XML-файла.

1. В папке App_Data создайте XML-файл с именемdata.xml.
2. Замените существующий XML следующим кодом, который представляет собой некоторые XML-данные о сотрудниках в вымышленной компании.

   Erin 10440  Kim 17772  Dean 23880  David 7663  Sanjay 21773  Michelle 32294   

@using System.Data; @ < var dataSet = new DataSet(); dataSet.ReadXmlSchema(Server.MapPath("~/App_Data/data.xsd")); dataSet.ReadXml(Server.MapPath("~/App_Data/data.xml")); var dataView = new DataView(dataSet.Tables[0]); var myChart = new Chart(width: 600, height: 400) .AddTitle("Sales Per Employee") .AddSeries("Default", chartType: "Pie", xValue: dataView, xField: "Name", yValues: dataView, yFields: "Sales") .Write(); >

Код сначала создает DataSet объект . Этот объект используется для управления данными, которые считываются из XML-файла, и упорядочивания их в соответствии с информацией в файле схемы. (Обратите внимание, что в верхней части кода содержится оператор using SystemData . Это необходимо для работы с DataSet объектом . Дополнительные сведения см. в разделе Операторы Using и Полные имена далее в этой статье.) Затем код создает объект на DataView основе набора данных. Представление данных предоставляет объект, к которому может привязаться диаграмма, то есть чтение и построение диаграммы. Диаграмма привязывается к данным с помощью AddSeries метода , как вы видели ранее при диаграмме данных массива, за исключением того, что на xValue этот раз параметры и yValues задаются для DataView объекта . В этом примере также показано, как указать определенный тип диаграммы. При добавлении данных в AddSeries метод chartType также задается параметр для отображения круговой диаграммы.

Операторы Using и полные имена

Платформа .NET Framework, на основе которой веб-страницы ASP.NET синтаксис Razor, состоит из многих тысяч компонентов (классов). Чтобы обеспечить управляемое управление для работы со всеми этими классами, они упорядочены по пространствам имен, которые в некоторой степени похожи на библиотеки. Например, пространство имен содержит классы, System.Web поддерживающие взаимодействие между браузером и сервером, System.Xml пространство имен содержит классы, используемые для создания и чтения XML-файлов, а System.Data пространство имен содержит классы, позволяющие работать с данными.

Чтобы получить доступ к любому заданному классу в платформа .NET Framework, код должен знать не только имя класса, но и пространство имен, в которое находится класс. Например, чтобы использовать вспомогательное Chart средство, код должен найти System.Web.Helpers.Chart класс , который объединяет пространство имен ( System.Web.Helpers ) с именем класса ( Chart ). Это называется полным именем класса — его полное, однозначное расположение на просторах платформа .NET Framework. В коде это будет выглядеть следующим образом:

var myChart = new System.Web.Helpers.Chart(width: 600, height: 400) // etc.

Однако использовать эти длинные полные имена каждый раз, когда вы хотите ссылаться на класс или вспомогательный класс, это громоздкий (и подверженный ошибкам). Таким образом, чтобы упростить использование имен классов, можно импортировать интересующие вас пространства имен, которые обычно являются лишь горсткой из множества пространств имен в платформа .NET Framework. Если вы импортировали пространство имен, вместо полного имени () можно использовать только имя класса ( Chart System.Web.Helpers.Chart ). Когда код выполняется и встречает имя класса, он может искать только импортированные пространства имен, чтобы найти этот класс.

При использовании веб-страницы ASP.NET с синтаксисом Razor для создания веб-страниц обычно каждый раз используется один и тот же набор классов, включая WebPage класс, различные вспомогательные функции и т. д. Чтобы сэкономить при импорте соответствующих пространств имен при каждом создании веб-сайта, ASP.NET настроен таким образом, чтобы автоматически импортировать набор основных пространств имен для каждого веб-сайта. Вот почему до сих пор вам не приходилось иметь дело с пространствами имен или импортом; все классы, с которыми вы работали, находятся в пространствах имен, которые уже импортированы.

Однако иногда необходимо работать с классом, который не находится в пространстве имен, которое автоматически импортируется. В этом случае можно использовать полное имя этого класса или вручную импортировать пространство имен, содержащее класс . Чтобы импортировать пространство имен, используйте using оператор ( import в Visual Basic), как было показано в примере ранее в этой статье.

Например, DataSet класс находится в System.Data пространстве имен . Пространство System.Data имен автоматически недоступно для ASP.NET страниц Razor. Поэтому для работы с классом с использованием его полного DataSet имени можно использовать следующий код:

var dataSet = new System.Data.DataSet();

Если вам нужно многократно использовать DataSet класс , можно импортировать пространство имен, как это, а затем использовать только имя класса в коде:

@using System.Data; @ < var dataSet = new DataSet(); // etc. >

Вы можете добавить using операторы для любых других пространств имен платформа .NET Framework, на которые требуется ссылаться. Однако, как уже отмечалось, это не нужно делать часто, так как большинство классов, с которыми вы будете работать, находятся в пространствах имен, которые автоматически импортируются ASP.NET для использования на страницах .cshtml и .vbhtml .

Отображение диаграмм внутри веб-страницы

В примерах, которые вы видели до сих пор, вы создаете диаграмму, а затем она отображается непосредственно в браузере в виде графического элемента. Однако во многих случаях требуется отобразить диаграмму как часть страницы, а не только сама по себе в браузере. Для этого требуется двухэтапный процесс. Первым шагом является создание страницы, которая создает диаграмму, как вы уже видели.

Второй шаг — отображение результирующего изображения на другой странице. Для отображения изображения используется элемент HTML , как и любое изображение. Однако вместо ссылки на файл.jpg или .png элемент ссылается на CSHTML-файл, содержащий вспомогательный Chart элемент, создающий диаграмму. При запуске отображаемой страницы элемент получает выходные данные вспомогательной Chart функции и отрисовывает диаграмму.

1. Создайте файл с именем ShowChart.cshtml.
2. Замените существующее содержимое следующим:

     
Chart Example
 
The following chart is generated by the ChartArrayBasic.cshtml file, but is shown in this page.
 
 
   

Код использует элемент для отображения диаграммы, созданной ранее в файле ChartArrayBasic.cshtml .

Стилизация диаграммы

Вспомогательное Chart средство поддерживает большое количество параметров, которые позволяют настраивать внешний вид диаграммы. Вы можете задать цвета, шрифты, границы и т. д. Простой способ настроить внешний вид диаграммы — использовать тему. Темы — это коллекции данных, задающие способ визуализации диаграммы с указанием шрифтов, цветов, меток, палитр, границ и эффектов. (Обратите внимание, что стиль диаграммы не указывает тип диаграммы.)

В следующей таблице перечислены встроенные темы.

Вы можете указать тему, используемую при создании новой диаграммы.

1. Создайте файл с именем ChartStyleGreen.cshtml.
2. Замените существующее содержимое на странице следующим:

Этот код такой же, как и в предыдущем примере, в котором база данных используется для получения данных, но при создании Chart объекта добавляется theme параметр . Ниже показан измененный код.

var myChart = new Chart(width: 600, height: 400, theme: ChartTheme.Green) 

Сохранение диаграммы

При использовании вспомогательной Chart функции, как вы уже видели в этой статье, она повторно создает диаграмму с нуля при каждом вызове. При необходимости код диаграммы также повторно запрашивает базу данных или повторно считывает XML-файл для получения данных. В некоторых случаях это может быть сложной операцией, например, если запрашиваемая база данных большая или XML-файл содержит много данных. Даже если диаграмма не содержит большого объема данных, процесс динамического создания изображения занимает серверные ресурсы, и если многие пользователи запрашивают страницу или страницы, на которых отображается диаграмма, это может повлиять на производительность вашего веб-сайта.

Чтобы уменьшить потенциальное влияние создания диаграммы на производительность, вы можете создать диаграмму при первой необходимости, а затем сохранить ее. Когда диаграмма потребуется снова, а не повторно, вы можете просто получить сохраненную версию и отобразить ее.

Вы можете сохранить диаграмму следующими способами:

• Кэшируйте диаграмму в памяти компьютера (на сервере).
• Сохраните диаграмму в виде файла изображения.
• Сохраните диаграмму в виде XML-файла. Этот параметр позволяет изменить диаграмму перед сохранением.

Кэширование диаграммы

После создания диаграммы ее можно кэшировать. Кэширование диаграммы означает, что ее не нужно повторно создавать, если ее необходимо снова отобразить. При сохранении диаграммы в кэше вы предоставляете ей ключ, который должен быть уникальным для этой диаграммы.

Диаграммы, сохраненные в кэше, могут быть удалены, если на сервере недостаточно памяти. Кроме того, кэш очищается, если по какой-либо причине приложение перезапускается. Поэтому стандартный способ работы с кэшируемыми диаграммами — всегда проверка сначала, доступна ли она в кэше, а если нет, то создать или повторно создать ее.

1. В корне веб-сайта создайте файл с именем ShowCachedChart.cshtml.
2. Замените существующее содержимое следующим:

     
Chart Example
 
Clear cache
   

Тег содержит атрибут , указывающий src на файл ChartSaveToCache.cshtml и передающий ключ на страницу в виде строки запроса. Ключ содержит значение myChartKey. Файл ChartSaveToCache.cshtml содержит вспомогательное Chart средство, создающее диаграмму. Вы создадите эту страницу через некоторое время. В конце страницы есть ссылка на страницу с именем ClearCache.cshtml. Это страница, которую вы также создадите в ближайшее время. Файл ClearCache.cshtml требуется только для тестирования кэширования в этом примере— это не ссылка или страница, которые обычно включаются при работе с кэшируемыми диаграммами.

@< var chartKey = Request["key"]; if (chartKey != null) < var cachedChart = Chart.GetFromCache(key: chartKey); if (cachedChart == null) < cachedChart = new Chart(600, 400); cachedChart.AddTitle("Cached Chart -- Cached at " + DateTime.Now); cachedChart.AddSeries( name: "Employee", axisLabel: "Name", xValue: new[] < "Peter", "Andrew", "Julie", "Mary", "Dave" >, yValues: new[] < "2", "6", "4", "5", "3" >); cachedChart.SaveToCache(key: chartKey, minutesToCache: 2, slidingExpiration: false); > Chart.WriteFromCache(chartKey); > > 

@ < WebCache.Remove("myChartKey"); >   
Cache has been cleared.
 
Return to ShowCachedChart.cshtml
   

Сохранение диаграммы в виде файла изображения

Диаграмму также можно сохранить в виде файла изображения (например, в виде файла .jpg ) на сервере. Затем файл изображения можно использовать так же, как и любой другой образ. Преимущество заключается в том, что файл хранится, а не сохраняется во временном кэше. Вы можете сохранить новое изображение диаграммы в разное время (например, каждый час), а затем сохранить постоянную запись изменений, происходящих с течением времени. Обратите внимание, что необходимо убедиться, что веб-приложение имеет разрешение на сохранение файла в папку на сервере, в которую вы хотите поместить файл образа.

1. В корне веб-сайта создайте папку с именем _ChartFiles , если она еще не существует.
2. В корне веб-сайта создайте файл с именем ChartSave.cshtml.
3. Замените существующее содержимое следующим кодом:

@< var filePathName = "_ChartFiles/chart01.jpg"; if (!File.Exists(Server.MapPath(filePathName))) < var chartImage = new Chart(600, 400); chartImage.AddTitle("Chart Title"); chartImage.AddSeries( name: "Employee", axisLabel: "Name", xValue: new[] < "Peter", "Andrew", "Julie", "Mary", "Dave" >, yValues: new[] < "2", "6", "4", "5", "3" >); chartImage.Save(path: filePathName); > >        

Код сначала проверяет, существует ли файл.jpg , путем вызова File.Exists метода . Если файл не существует, код создает новый Chart объект из массива. На этот раз код вызывает Save метод и передает path параметр , чтобы указать путь к файлу и имя файла для сохранения диаграммы. В тексте страницы элемент использует путь, указывающий на отображаемый.jpg файл.

Сохранение диаграммы в виде XML-файла

Наконец, можно сохранить диаграмму в виде XML-файла на сервере. Преимущество использования этого метода по сравнению с кэшированием диаграммы или сохранением диаграммы в файл заключается в том, что при необходимости можно изменить XML-код перед отображением диаграммы. У приложения должны быть разрешения на чтение и запись для папки на сервере, в которую вы хотите поместить файл образа.

1. В корне веб-сайта создайте файл с именем ChartSaveXml.cshtml.
2. Замените существующее содержимое следующим кодом:

@ < Chart chartXml; var filePathName = "_ChartFiles/XmlChart.xml"; if (File.Exists(Server.MapPath(filePathName))) < chartXml = new Chart(width: 600, height: 400, themePath: filePathName); >else < chartXml = new Chart(width: 600, height: 400); chartXml.AddTitle("Chart Title -- Saved at " + DateTime.Now); chartXml.AddSeries( name: "Employee", axisLabel: "Name", xValue: new[] < "Peter", "Andrew", "Julie", "Mary", "Dave" >, yValues: new[] < "2", "6", "4", "5", "3" >); chartXml.SaveXml(path: filePathName); > chartXml.Write(); > 

Дополнительные ресурсы

• Общие сведения о работе с базой данных на сайтах веб-страницы ASP.NET
• Использование кэширования на сайтах веб-страницы ASP.NET для повышения производительности
• Класс Chart (справочник по API веб-страницы ASP.NET на сайте MSDN)