Диаграмма с pChart

Хотя размер изображения составляет 500 × 300 пикселей, фактическая площадь диаграммы должна быть меньше, чем для размещения меток осей X и Y. Метод setGraphArea()

 <?php
$myImage->setGraphArea(25,25, 475,275);

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

 <?php
$myImage->drawScale();

Некоторые диаграммы требуют вызова drawScale()

Теперь пришло время создать правильную диаграмму. В настоящее время pChart предлагает 14 различных типов базовых диаграмм, каждая из которых имеет множество настраиваемых параметров. Я просто хочу простую гистограмму с параметрами по умолчанию:

 <?php
$myImage->drawBarChart();

На этом этапе $myImage Вызов метода Render()null Или вы можете указать местоположение файла в качестве аргумента, и Render()

 <?php
header("Content-Type: image/png");
$myImage->Render(null);

Когда вы запускаете скрипт PHP, ваш браузер должен показать вам диаграмму, подобную этой:

Диаграмма из трех серий

Сейчас я покажу вам более сложный пример с линейными и графическими диаграммами, чтобы показать три ряда: квадрат, куб и четвертые степени целых чисел от 0 до 4. Начните с создания ряда в виде программно заполненных массивов:

 <?php
$squareSeries = array();
$cubeSeries = array();
$fourthSeries = array();
for ($i = 0; $i <= 4; $i++) {
    $squareSeries[$i] = pow($i, 2);
    $cubeSeries[$i] =  pow($i, 3);
    $fourthSeries[$i] = pow($i, 4);
}

Создайте новый объект данных и добавьте в него ряд с помощью addPoints()

 <?php
$myPowersData = new pData();
$myPowersData->addPoints($squareSeries,"Square");
$myPowersData->addPoints($cubeSeries,"Cube");
$myPowersData->addPoints($fourthSeries,"Fourth");

Использование разных цветов для каждой серии поможет сделать диаграмму более удобной для чтения. Вы можете установить цвета для каждой серии, используя метод setPalette() Он использует массив, указывающий желаемый цвет в нотации RGBa . Здесь я установлю цвет для квадратов серии: темно-красный, кубики — зеленый и четвертый ряд — синий:

 <?php
$myPowersData->setPalette("Square",
    array("R" => 240,"G" => 16, "B" =>16, "Alpha" => 100));
$myPowersData->setPalette("Cube",
    array("R" => 16, "G" => 240, "B" => 16, "Alpha" => 100));
$myPowersData->setPalette("Fourth",
    array("R" => 16, "G" => 16, "B" => 240, "Alpha" => 100));

Для объекта изображения я буду использовать тот же размер, что и раньше, но я укажу другое семейство шрифтов и размер шрифта:

 <?php
$myPowersImage = new pImage(500,300, $myPowersData);
$myPowersImage->setFontProperties(array(
    "FontName" => PCHART_PATH . "/fonts/MankSans.ttf",
    "FontSize" => 12));

Затем увеличьте границы для размещения больших фигур и используйте масштабирование по умолчанию:

 <?php
$myPowersImage->setGraphArea(40,40, 460,260);
$myPowersImage->drawScale();

Наконец, попросите pChart нарисовать линейную диаграмму с помощью drawLineChart()

 <?php
$myPowersImage->drawLineChart();
header("Content-Type: image/png");
$myPowersImage->Render(null);

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

 <?php
$myPowersImage->drawPlotChart();
header("Content-Type: image/png");
$myPowersImage->Render(null);

Снова запустите скрипт и проверьте графики в вашем браузере.

Это хорошая идея, чтобы добавить описательные метки и легенду к вашим диаграммам, чтобы идентифицировать серию. Методы drawText()drawLegend()

Метод drawText() Хотя доступно множество параметров настройки, я укажу только цвет и размер шрифта. Добавьте эту строку перед вызовом drawPlotChart()

 <?php
$myPowersImage->drawText(150,50, "The First Three Powers",
    array("R" => 0, "G" => 64, "B" => 255, "FontSize" => 20));

Аналогично, drawLegend() Я создам один с цветными кругами (LEGEND_FAMILY_CIRCLE), светлым фоном и более темной рамкой. Шрифт такой же, как и для текста, и я размещу легенду на 70 100, чтобы держаться подальше от линий сюжета. Добавьте эту строку под вызовом drawText()

 <?php
$myPowersImage->drawLegend(70,100, 
    array("R" => 220, "G" => 220, "B" => 220,
          "FontR" => 0, "FontG" => 64, "FontB" => 255,
          "BorderR" => 80, "BorderG" => 80, "BorderB" => 80,
          "FontSize" => 12, "Family" => LEGEND_FAMILY_CIRCLE));

Вывод

Эх бен дис донк! pChart — удивительно простая библиотека для профессиональных графиков и диаграмм. Я только поцарапал поверхность того, на что он способен в статье; он имеет сотни настроек и настроек. И даже для несвободных приложений pChart справедливо оценена. Мерси Beaucoup, Жан-Дэмиен!

Если вы заинтересованы в просмотре полного исходного кода, который использовался для создания графики в этой статье, вы можете найти его на GitHub.

Изображение через ungureanu / Shutterstock