Для выполнения примера необходимо создать html-страницу и выполнить следующие действия:
1. Добавить ссылку на css-файл PP.css. Также нужно добавить ссылки на следующие js-файлы:
PP.js;
PP.GraphicsBase.js;
PP.Charts_Canvas.js;
resources.ru.js.
2. Далее в теге <head> необходимо добавить стиль для блока с идентификатором «chart»:
<style type="text/css">
div#chart {
border: #CCCCCC 1px solid;
padding: 1px;
margin: 1px;
width: 600px;
height: 500px;
}
</style>
3. Затем в теге <head> необходимо добавить сценарий, создающий гистограмму:
<script type="text/javascript">
var chart; // Диаграмма
// Создает диаграмму
function createChart() {
// Создаем массивы значений для рядов данных
var data0 = [-10, 10, -20, 20, -30];
var data1 = [-20, 20, -30, 30, -40];
var data2 = [-30, 30, -40, 40, -50];
var data3 = [-40, 40, -50, 50, -60];
var data4 = [-50, 50, -60, 60, -70];
var trendData = [10, 20, 30, 40, 50];
// Создаем массив с цветовыми значениями
var colors = ["rgb(192,217,253)", "rgb(163,200,252)", "rgb(134,183,251)",
"rgb(96,161,250)", "rgb(192,142,204)", "rgb(192,107,188)"
];
// Создаем диаграмму
chart = new PP.Ui.Chart({
Width: 600, // Ширина диаграммы
Height: 500, // Высота диаграммы
// Отступы диаграммы
PaddingLeft: 15,
PaddingRight: 20,
PaddingTop: 30,
PaddingBottom: 40,
UseSoftPadding: false, // Признак использования альтернативного расчета отступов
ParentNode: "chart", // Родительский элемент
Type: "Column", // Тип диаграммы
AlternateColumnPadding: true,
PointPadding: -0.2,
ExcludeInvisibleSeries: true, // Признак необходимости исключения невидимых рядов данных из расчетов
// Ряды данных
"Series": [{ // Ряд 1
"Name": "Австралия", // Наименование ряда
"Data": data0, // Массив значений
"Color": colors[0], // Цвет
"LineColor": colors[1], // Цвет линий
"LineWidth": 4, // Толщина линий
"ShowInLegend": false, // Признак отображения ряда в легенде
"IsVisible": true // Признак видимости ряда
}, { // Ряд 2
"Name": "Азия",
"Data": data1,
"Color": colors[1],
"LineColor": colors[2],
"LineWidth": 4,
"ShowInLegend": true
}, { // Ряд 3
"Name": "Африка",
"Data": data2,
"Color": colors[2],
"LineColor": colors[3],
"LineWidth": 4,
"ShowInLegend": true
}, { // Ряд 4
"Name": "Европа",
"Data": data3,
"Color": colors[3],
"LineColor": colors[4],
"LineWidth": 4,
"ShowInLegend": true
}, { // Ряд 5
"Name": "С. Америка",
"Data": data4,
"Color": colors[4],
"LineColor": colors[5],
"LineWidth": 4,
"ShowInLegend": true
}, {
// Линия тренда
"Type": "Line", // Тип ряда
"Name": "Тренд",
"Data": trendData,
"Color": colors[4],
"LineColor": colors[5],
"LineWidth": 2,
"ShowInLegend": false,
"Trend": true
}],
// Ось категорий
"XAxis": {
"Categories": ["2001", "2002", "2003", "2004", "2005"], // Массив категорий
// Настройки подписей
"Labels": {
"Enabled": true
}
},
// Ось значений
"YAxis": {
"Labels": {
"Enabled": true
}, // Настройки подписей
"Max": 110, // Максимальное значение
"Min": -110, // Минимальное значение
},
// Дополнительная ось значений
"YSAxis": {
"Enabled": false // Признак активности оси
},
// Область отрисовки диаграммы
"PlotArea": {},
// Легенда диаграммы
"Legend": {
CellSpacing: 60 // Отступы между элементами легенды
},
// Заголовок диаграммы
"Title": {
"Text": "Диаграмма"
}
})
}
</script>
4. В теге <body> в качестве значения атрибута «onLoad» указать имя функции для создания диаграммы и добавить блок с идентификатором «chart»:
<body onload="createChart()"> <div id="chart"></div> </body>
В результате выполнения примера на html-странице будет размещен компонент Chart:
См. также: