Данные повсюду вокруг нас, но скучно иметь дело только с необработанными данными. Вот где визуализация входит в картину.
Если вы посмотрите на график Google Trends ниже , вы поймете, что интерес к визуализации данных постоянно растет на протяжении многих лет.
Таким образом, если вы имеете дело с данными и еще не используете какой-либо компонент построения диаграмм, есть большая вероятность, что он вам понадобится в ближайшее время. По этой причине я решил составить список библиотек, которые облегчат вам задачу визуализации данных.
Но прежде чем мы начнем, вы должны понимать, что существует два типа компонентов построения диаграмм: серверная и клиентская. У обоих есть свои плюсы и минусы, и то, что лучше для вас, полностью зависит от цели вашего проекта и имеющихся у вас ресурсов. Я рассмотрел диаграммы на стороне клиента в этом посте , но есть некоторые совпадения, как вы увидите ниже.
Серверная и клиентская диаграммы.
Серверные компоненты обычно генерируют графические изображения. Они используют алгоритмы для преобразования данных в изображения диаграмм и увеличения нагрузки на сервер. Помимо использования вычислительной мощности сервера диаграммы на основе изображений увеличивают потребление полосы пропускания. Иногда большие размеры изображений приводят к медленной загрузке, что может раздражать конечных пользователей.
Указанные выше ограничения на стороне сервера могут быть преодолены с помощью компонентов на стороне клиента (на основе JavaScript). Браузер будет извлекать данные JSON или XML с сервера и отображать диаграммы локально. Компоненты на стороне клиента также имеют большую область настройки. Они часто интерактивны, поддерживают анимацию и могут легко вписаться в дизайн вашего приложения.
Некоторые библиотеки графиков (например, FusionCharts) предоставляют оболочки, которые позволяют писать код только на PHP. Используя оболочку PHP, вы можете сгенерировать необходимый код JavaScript и HTML в виде строки на сервере. Затем вы можете вывести эти строки на страницу для создания диаграмм.
Имея это в виду, давайте рассмотрим некоторые варианты построения диаграмм с PHP-компонентами.
Google Charts (на стороне клиента)
Несмотря на то, что он основан на JavaScript, в Google Charts есть пара опций, позволяющих сделать ваши диаграммы полностью на PHP. Вы можете либо использовать серверный код (в нашем случае PHP), чтобы получить данные, либо получить один из упаковщиков с открытым исходным кодом, чтобы сделать это за вас.
Хорошая вещь о Google Charts, помимо того, что она полностью бесплатна, состоит в том, что у них есть много примеров кода, которые помогут вам быстро начать работу.
Важно помнить о Google Charts: вам не разрешено размещать файлы JS Google на вашем сервере.
Создание диаграмм с помощью Google Charts:
Я построил данные из опроса SitePoint о самых популярных PHP-фреймворках в 2015 году. Чтобы увидеть живой график, перейдите сюда и нажмите «Выполнить».
Вот код HTML для диаграммы: (Вы можете просмотреть полный код здесь .)
<html> <head> <!--Load the AJAX API--> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> // Load the Visualization API. google.load('visualization', '1', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.setOnLoadCallback(drawChart); function drawChart() { var jsonData = $.ajax({ url: "getData.php", dataType:"json", async: false }).responseText; // Create our data table out of JSON data loaded from server. var data = new google.visualization.DataTable(jsonData); // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); chart.draw(data, {width: 800, height: 400}); } </script> </head> <body> <!--Div that will hold the column chart--> <div id="chart_div"></div> </body> </html> Вот файл getData.php, включенный в код выше:
<?php // It reads a json formatted text file and outputs it. $string = file_get_contents("data.json"); echo $string; // Instead you can query your database and parse into JSON. ?>
FusionCharts (Клиентская часть)
FusionCharts в первую очередь славится своими графиками JavaScript или jQuery , но не многие разработчики знают о его официальной оболочке PHP . Вы можете использовать исчерпывающую библиотеку FusionCharts, содержащую более 90+ интерактивных диаграмм и 965 карт, через оболочку PHP. Их диаграммы очень настраиваемы, и у них есть довольно активная система поддержки.
У них есть отличная коллекция панелей инструментов (многие из которых доступны для бесплатного скачивания) и огромная галерея графиков для вдохновения.
Важно помнить о FusionCharts, что это платный вариант. Хотя обертка бесплатна, вам потребуется лицензия для использования библиотеки в коммерческих приложениях. Это не должно быть так сложно, как кажется, вы всегда можете скачать бесплатную пробную версию, которая не имеет ограничений по возможностям.
Создание диаграмм с помощью FusionCharts:
Чтобы увидеть график в реальном времени, перейдите сюда и нажмите «Выполнить»
Вот код PHP для генерации столбчатой диаграммы: ( полный код можно посмотреть здесь )
<html> <head> // Including FusionCharts library files <script src="fusioncharts.js"></script> </head> <body> <?php // Example of how to draw a chart using FusionCharts and PHP. // fusioncharts.php functions to help us easily embed the charts. include("fusioncharts.php"); ?> <?php // Create the chart - Column 2D Chart with data given in constructor parameter // Syntax for the constructor - new FusionCharts("type of chart", "unique chart id", "width of chart", "height of chart", "div id to render the chart", "type of data", "actual data") $columnChart = new FusionCharts("Column2D", "myFirstChart" , 780, 400, "chart-1", "jsonurl", "data.json"); // Render the chart $columnChart->render(); ?> <div id="chart-1"><!-- FusionCharts will render here--></div> </body> </html>в<html> <head> // Including FusionCharts library files <script src="fusioncharts.js"></script> </head> <body> <?php // Example of how to draw a chart using FusionCharts and PHP. // fusioncharts.php functions to help us easily embed the charts. include("fusioncharts.php"); ?> <?php // Create the chart - Column 2D Chart with data given in constructor parameter // Syntax for the constructor - new FusionCharts("type of chart", "unique chart id", "width of chart", "height of chart", "div id to render the chart", "type of data", "actual data") $columnChart = new FusionCharts("Column2D", "myFirstChart" , 780, 400, "chart-1", "jsonurl", "data.json"); // Render the chart $columnChart->render(); ?> <div id="chart-1"><!-- FusionCharts will render here--></div> </body> </html>
pChart (сторона сервера)
pChart — одна из немногих встроенных в PHP библиотек диаграмм, которая все еще находится в активной разработке. Но, как обсуждалось выше, есть и плюсы, и минусы в том, чтобы быть чисто серверным компонентом построения диаграмм.
Основным преимуществом является то, что вам не нужно беспокоиться о совместимости между устройствами и браузерами, так как pChart создаст для вас изображения. Но вы теряете интерактивность, которую предлагают библиотеки на стороне клиента, такие как FusionCharts и Google Charts.
Создание диаграмм с помощью pChart:
Если вы пытаетесь начать работу с pChart, у SitePoint есть отличное, хотя и несколько старое учебное пособие для вас: составление диаграмм с помощью pChart .
Вот код PHP для сюжета (скачать исходный код здесь ):
<?php /* CAT:Bar Chart */ /* pChart library inclusions */ include("../class/pData.class.php"); include("../class/pDraw.class.php"); include("../class/pImage.class.php"); /* Create and populate the pData object */ $MyData = new pData(); /* This is the data to be plotted */ $MyData->addPoints(array(2112,1005,703,620,482,420,346,306,293,231),""); $MyData->setAxisName(0,"Votes"); /* These are the data labels */ $MyData->addPoints(array("Laravel","Symfony2","Nette","Yii 2","CodeIgniter","PHPixie","Zend 2","No Framework","Yii 1", "Phalcon"),"Frameworks"); $MyData->setSeriesDescription("Frameworks","Framework"); $MyData->setAbscissa("Frameworks"); /* Create the pChart object */ $myPicture = new pImage(700,230,$MyData); /* Turn off Antialiasing */ $myPicture->Antialias = FALSE; /* Add a border to the picture */ $myPicture->drawRectangle(0,0,699,229,array("R"=>0,"G"=>0,"B"=>0)); /* Set the default font */ $myPicture->setFontProperties(array("FontName"=>"../fonts/pf_arma_five.ttf","FontSize"=>6)); /* Define the chart area */ $myPicture->setGraphArea(60,40,650,200); /* Draw the scale */ $scaleSettings = array("GridR"=>200,"GridG"=>200,"GridB"=>200,"DrawSubTicks"=>TRUE,"CycleBackground"=>TRUE); $myPicture->drawScale($scaleSettings); /* Write the chart legend */ $myPicture->drawLegend(580,12,array("Style"=>LEGEND_NOBORDER,"Mode"=>LEGEND_HORIZONTAL)); /* Turn on shadow computing */ $myPicture->setShadow(TRUE,array("X"=>1,"Y"=>1,"R"=>0,"G"=>0,"B"=>0,"Alpha"=>10)); /* Draw the chart */ $myPicture->setShadow(TRUE,array("X"=>1,"Y"=>1,"R"=>0,"G"=>0,"B"=>0,"Alpha"=>10)); $settings = array("Gradient"=>TRUE,"GradientMode"=>GRADIENT_EFFECT_CAN,"DisplayPos"=>LABEL_POS_INSIDE,"DisplayValues"=>TRUE,"DisplayR"=>255,"DisplayG"=>255,"DisplayB"=>255,"DisplayShadow"=>TRUE,"Surrounding"=>10); $myPicture->drawBarChart(); /* Render the picture (choose the best way) */ $myPicture->autoOutput("pictures/example.drawBarChart.simple.png"); ?>в<?php /* CAT:Bar Chart */ /* pChart library inclusions */ include("../class/pData.class.php"); include("../class/pDraw.class.php"); include("../class/pImage.class.php"); /* Create and populate the pData object */ $MyData = new pData(); /* This is the data to be plotted */ $MyData->addPoints(array(2112,1005,703,620,482,420,346,306,293,231),""); $MyData->setAxisName(0,"Votes"); /* These are the data labels */ $MyData->addPoints(array("Laravel","Symfony2","Nette","Yii 2","CodeIgniter","PHPixie","Zend 2","No Framework","Yii 1", "Phalcon"),"Frameworks"); $MyData->setSeriesDescription("Frameworks","Framework"); $MyData->setAbscissa("Frameworks"); /* Create the pChart object */ $myPicture = new pImage(700,230,$MyData); /* Turn off Antialiasing */ $myPicture->Antialias = FALSE; /* Add a border to the picture */ $myPicture->drawRectangle(0,0,699,229,array("R"=>0,"G"=>0,"B"=>0)); /* Set the default font */ $myPicture->setFontProperties(array("FontName"=>"../fonts/pf_arma_five.ttf","FontSize"=>6)); /* Define the chart area */ $myPicture->setGraphArea(60,40,650,200); /* Draw the scale */ $scaleSettings = array("GridR"=>200,"GridG"=>200,"GridB"=>200,"DrawSubTicks"=>TRUE,"CycleBackground"=>TRUE); $myPicture->drawScale($scaleSettings); /* Write the chart legend */ $myPicture->drawLegend(580,12,array("Style"=>LEGEND_NOBORDER,"Mode"=>LEGEND_HORIZONTAL)); /* Turn on shadow computing */ $myPicture->setShadow(TRUE,array("X"=>1,"Y"=>1,"R"=>0,"G"=>0,"B"=>0,"Alpha"=>10)); /* Draw the chart */ $myPicture->setShadow(TRUE,array("X"=>1,"Y"=>1,"R"=>0,"G"=>0,"B"=>0,"Alpha"=>10)); $settings = array("Gradient"=>TRUE,"GradientMode"=>GRADIENT_EFFECT_CAN,"DisplayPos"=>LABEL_POS_INSIDE,"DisplayValues"=>TRUE,"DisplayR"=>255,"DisplayG"=>255,"DisplayB"=>255,"DisplayShadow"=>TRUE,"Surrounding"=>10); $myPicture->drawBarChart(); /* Render the picture (choose the best way) */ $myPicture->autoOutput("pictures/example.drawBarChart.simple.png"); ?>в<?php /* CAT:Bar Chart */ /* pChart library inclusions */ include("../class/pData.class.php"); include("../class/pDraw.class.php"); include("../class/pImage.class.php"); /* Create and populate the pData object */ $MyData = new pData(); /* This is the data to be plotted */ $MyData->addPoints(array(2112,1005,703,620,482,420,346,306,293,231),""); $MyData->setAxisName(0,"Votes"); /* These are the data labels */ $MyData->addPoints(array("Laravel","Symfony2","Nette","Yii 2","CodeIgniter","PHPixie","Zend 2","No Framework","Yii 1", "Phalcon"),"Frameworks"); $MyData->setSeriesDescription("Frameworks","Framework"); $MyData->setAbscissa("Frameworks"); /* Create the pChart object */ $myPicture = new pImage(700,230,$MyData); /* Turn off Antialiasing */ $myPicture->Antialias = FALSE; /* Add a border to the picture */ $myPicture->drawRectangle(0,0,699,229,array("R"=>0,"G"=>0,"B"=>0)); /* Set the default font */ $myPicture->setFontProperties(array("FontName"=>"../fonts/pf_arma_five.ttf","FontSize"=>6)); /* Define the chart area */ $myPicture->setGraphArea(60,40,650,200); /* Draw the scale */ $scaleSettings = array("GridR"=>200,"GridG"=>200,"GridB"=>200,"DrawSubTicks"=>TRUE,"CycleBackground"=>TRUE); $myPicture->drawScale($scaleSettings); /* Write the chart legend */ $myPicture->drawLegend(580,12,array("Style"=>LEGEND_NOBORDER,"Mode"=>LEGEND_HORIZONTAL)); /* Turn on shadow computing */ $myPicture->setShadow(TRUE,array("X"=>1,"Y"=>1,"R"=>0,"G"=>0,"B"=>0,"Alpha"=>10)); /* Draw the chart */ $myPicture->setShadow(TRUE,array("X"=>1,"Y"=>1,"R"=>0,"G"=>0,"B"=>0,"Alpha"=>10)); $settings = array("Gradient"=>TRUE,"GradientMode"=>GRADIENT_EFFECT_CAN,"DisplayPos"=>LABEL_POS_INSIDE,"DisplayValues"=>TRUE,"DisplayR"=>255,"DisplayG"=>255,"DisplayB"=>255,"DisplayShadow"=>TRUE,"Surrounding"=>10); $myPicture->drawBarChart(); /* Render the picture (choose the best way) */ $myPicture->autoOutput("pictures/example.drawBarChart.simple.png"); ?>в<?php /* CAT:Bar Chart */ /* pChart library inclusions */ include("../class/pData.class.php"); include("../class/pDraw.class.php"); include("../class/pImage.class.php"); /* Create and populate the pData object */ $MyData = new pData(); /* This is the data to be plotted */ $MyData->addPoints(array(2112,1005,703,620,482,420,346,306,293,231),""); $MyData->setAxisName(0,"Votes"); /* These are the data labels */ $MyData->addPoints(array("Laravel","Symfony2","Nette","Yii 2","CodeIgniter","PHPixie","Zend 2","No Framework","Yii 1", "Phalcon"),"Frameworks"); $MyData->setSeriesDescription("Frameworks","Framework"); $MyData->setAbscissa("Frameworks"); /* Create the pChart object */ $myPicture = new pImage(700,230,$MyData); /* Turn off Antialiasing */ $myPicture->Antialias = FALSE; /* Add a border to the picture */ $myPicture->drawRectangle(0,0,699,229,array("R"=>0,"G"=>0,"B"=>0)); /* Set the default font */ $myPicture->setFontProperties(array("FontName"=>"../fonts/pf_arma_five.ttf","FontSize"=>6)); /* Define the chart area */ $myPicture->setGraphArea(60,40,650,200); /* Draw the scale */ $scaleSettings = array("GridR"=>200,"GridG"=>200,"GridB"=>200,"DrawSubTicks"=>TRUE,"CycleBackground"=>TRUE); $myPicture->drawScale($scaleSettings); /* Write the chart legend */ $myPicture->drawLegend(580,12,array("Style"=>LEGEND_NOBORDER,"Mode"=>LEGEND_HORIZONTAL)); /* Turn on shadow computing */ $myPicture->setShadow(TRUE,array("X"=>1,"Y"=>1,"R"=>0,"G"=>0,"B"=>0,"Alpha"=>10)); /* Draw the chart */ $myPicture->setShadow(TRUE,array("X"=>1,"Y"=>1,"R"=>0,"G"=>0,"B"=>0,"Alpha"=>10)); $settings = array("Gradient"=>TRUE,"GradientMode"=>GRADIENT_EFFECT_CAN,"DisplayPos"=>LABEL_POS_INSIDE,"DisplayValues"=>TRUE,"DisplayR"=>255,"DisplayG"=>255,"DisplayB"=>255,"DisplayShadow"=>TRUE,"Surrounding"=>10); $myPicture->drawBarChart(); /* Render the picture (choose the best way) */ $myPicture->autoOutput("pictures/example.drawBarChart.simple.png"); ?>то<?php /* CAT:Bar Chart */ /* pChart library inclusions */ include("../class/pData.class.php"); include("../class/pDraw.class.php"); include("../class/pImage.class.php"); /* Create and populate the pData object */ $MyData = new pData(); /* This is the data to be plotted */ $MyData->addPoints(array(2112,1005,703,620,482,420,346,306,293,231),""); $MyData->setAxisName(0,"Votes"); /* These are the data labels */ $MyData->addPoints(array("Laravel","Symfony2","Nette","Yii 2","CodeIgniter","PHPixie","Zend 2","No Framework","Yii 1", "Phalcon"),"Frameworks"); $MyData->setSeriesDescription("Frameworks","Framework"); $MyData->setAbscissa("Frameworks"); /* Create the pChart object */ $myPicture = new pImage(700,230,$MyData); /* Turn off Antialiasing */ $myPicture->Antialias = FALSE; /* Add a border to the picture */ $myPicture->drawRectangle(0,0,699,229,array("R"=>0,"G"=>0,"B"=>0)); /* Set the default font */ $myPicture->setFontProperties(array("FontName"=>"../fonts/pf_arma_five.ttf","FontSize"=>6)); /* Define the chart area */ $myPicture->setGraphArea(60,40,650,200); /* Draw the scale */ $scaleSettings = array("GridR"=>200,"GridG"=>200,"GridB"=>200,"DrawSubTicks"=>TRUE,"CycleBackground"=>TRUE); $myPicture->drawScale($scaleSettings); /* Write the chart legend */ $myPicture->drawLegend(580,12,array("Style"=>LEGEND_NOBORDER,"Mode"=>LEGEND_HORIZONTAL)); /* Turn on shadow computing */ $myPicture->setShadow(TRUE,array("X"=>1,"Y"=>1,"R"=>0,"G"=>0,"B"=>0,"Alpha"=>10)); /* Draw the chart */ $myPicture->setShadow(TRUE,array("X"=>1,"Y"=>1,"R"=>0,"G"=>0,"B"=>0,"Alpha"=>10)); $settings = array("Gradient"=>TRUE,"GradientMode"=>GRADIENT_EFFECT_CAN,"DisplayPos"=>LABEL_POS_INSIDE,"DisplayValues"=>TRUE,"DisplayR"=>255,"DisplayG"=>255,"DisplayB"=>255,"DisplayShadow"=>TRUE,"Surrounding"=>10); $myPicture->drawBarChart(); /* Render the picture (choose the best way) */ $myPicture->autoOutput("pictures/example.drawBarChart.simple.png"); ?>то<?php /* CAT:Bar Chart */ /* pChart library inclusions */ include("../class/pData.class.php"); include("../class/pDraw.class.php"); include("../class/pImage.class.php"); /* Create and populate the pData object */ $MyData = new pData(); /* This is the data to be plotted */ $MyData->addPoints(array(2112,1005,703,620,482,420,346,306,293,231),""); $MyData->setAxisName(0,"Votes"); /* These are the data labels */ $MyData->addPoints(array("Laravel","Symfony2","Nette","Yii 2","CodeIgniter","PHPixie","Zend 2","No Framework","Yii 1", "Phalcon"),"Frameworks"); $MyData->setSeriesDescription("Frameworks","Framework"); $MyData->setAbscissa("Frameworks"); /* Create the pChart object */ $myPicture = new pImage(700,230,$MyData); /* Turn off Antialiasing */ $myPicture->Antialias = FALSE; /* Add a border to the picture */ $myPicture->drawRectangle(0,0,699,229,array("R"=>0,"G"=>0,"B"=>0)); /* Set the default font */ $myPicture->setFontProperties(array("FontName"=>"../fonts/pf_arma_five.ttf","FontSize"=>6)); /* Define the chart area */ $myPicture->setGraphArea(60,40,650,200); /* Draw the scale */ $scaleSettings = array("GridR"=>200,"GridG"=>200,"GridB"=>200,"DrawSubTicks"=>TRUE,"CycleBackground"=>TRUE); $myPicture->drawScale($scaleSettings); /* Write the chart legend */ $myPicture->drawLegend(580,12,array("Style"=>LEGEND_NOBORDER,"Mode"=>LEGEND_HORIZONTAL)); /* Turn on shadow computing */ $myPicture->setShadow(TRUE,array("X"=>1,"Y"=>1,"R"=>0,"G"=>0,"B"=>0,"Alpha"=>10)); /* Draw the chart */ $myPicture->setShadow(TRUE,array("X"=>1,"Y"=>1,"R"=>0,"G"=>0,"B"=>0,"Alpha"=>10)); $settings = array("Gradient"=>TRUE,"GradientMode"=>GRADIENT_EFFECT_CAN,"DisplayPos"=>LABEL_POS_INSIDE,"DisplayValues"=>TRUE,"DisplayR"=>255,"DisplayG"=>255,"DisplayB"=>255,"DisplayShadow"=>TRUE,"Surrounding"=>10); $myPicture->drawBarChart(); /* Render the picture (choose the best way) */ $myPicture->autoOutput("pictures/example.drawBarChart.simple.png"); ?>то<?php /* CAT:Bar Chart */ /* pChart library inclusions */ include("../class/pData.class.php"); include("../class/pDraw.class.php"); include("../class/pImage.class.php"); /* Create and populate the pData object */ $MyData = new pData(); /* This is the data to be plotted */ $MyData->addPoints(array(2112,1005,703,620,482,420,346,306,293,231),""); $MyData->setAxisName(0,"Votes"); /* These are the data labels */ $MyData->addPoints(array("Laravel","Symfony2","Nette","Yii 2","CodeIgniter","PHPixie","Zend 2","No Framework","Yii 1", "Phalcon"),"Frameworks"); $MyData->setSeriesDescription("Frameworks","Framework"); $MyData->setAbscissa("Frameworks"); /* Create the pChart object */ $myPicture = new pImage(700,230,$MyData); /* Turn off Antialiasing */ $myPicture->Antialias = FALSE; /* Add a border to the picture */ $myPicture->drawRectangle(0,0,699,229,array("R"=>0,"G"=>0,"B"=>0)); /* Set the default font */ $myPicture->setFontProperties(array("FontName"=>"../fonts/pf_arma_five.ttf","FontSize"=>6)); /* Define the chart area */ $myPicture->setGraphArea(60,40,650,200); /* Draw the scale */ $scaleSettings = array("GridR"=>200,"GridG"=>200,"GridB"=>200,"DrawSubTicks"=>TRUE,"CycleBackground"=>TRUE); $myPicture->drawScale($scaleSettings); /* Write the chart legend */ $myPicture->drawLegend(580,12,array("Style"=>LEGEND_NOBORDER,"Mode"=>LEGEND_HORIZONTAL)); /* Turn on shadow computing */ $myPicture->setShadow(TRUE,array("X"=>1,"Y"=>1,"R"=>0,"G"=>0,"B"=>0,"Alpha"=>10)); /* Draw the chart */ $myPicture->setShadow(TRUE,array("X"=>1,"Y"=>1,"R"=>0,"G"=>0,"B"=>0,"Alpha"=>10)); $settings = array("Gradient"=>TRUE,"GradientMode"=>GRADIENT_EFFECT_CAN,"DisplayPos"=>LABEL_POS_INSIDE,"DisplayValues"=>TRUE,"DisplayR"=>255,"DisplayG"=>255,"DisplayB"=>255,"DisplayShadow"=>TRUE,"Surrounding"=>10); $myPicture->drawBarChart(); /* Render the picture (choose the best way) */ $myPicture->autoOutput("pictures/example.drawBarChart.simple.png"); ?>
PHP-графики ChartLogix (на стороне сервера)
Если в вашем приложении требуются только базовые графики, то PHP-графики ChartLogix могут быть хорошим вариантом. Он имеет ограниченную коллекцию, которая содержит наиболее часто используемые графики, такие как столбчатые, круговые, линейные и т. Д., И стоит всего 44,99 долларов США для неограниченного коммерческого использования.
Хотя он и не находится в активной разработке, он все же оказывает личную поддержку всем покупателям. Он отображает вывод в виде изображения и предлагает настройку макетов, шрифтов, цветовых схем и некоторых визуальных эффектов.
Создание диаграмм с использованием PHP-графиков ChartLogix:
ChartLogix не поставляется с бесплатной пробной версией, но это не большая проблема, потому что вы всегда можете использовать их функцию конструктора, чтобы ознакомиться с кодом и дизайном. На самом деле, это сэкономит вам много времени, поскольку вы можете оценить его за считанные минуты.
Ниже приведен код для создания гистограммы, и вы можете посетить эту страницу, чтобы поиграть с ней.
<?php include( 'chartlogix.inc.php' ); $bar = new BarChart(); //---- THE STYLE $bar->setBackground( 'EEEEEE', 'EEEEEE' ); $bar->setPadding( 20 ); $bar->setDefaultFont( 'arial.ttf' ); $bar->setTitleStyle( 'arial.ttf', 15, '000000' ); $bar->setTitlePosition( 0, 0 ); $bar->setLegendWidth( 40.00 ); $bar->setLegendTextStyle( 'arial.ttf', 10, '000000', 10 ); $bar->setLegendKeyStyle( 10, 10 ); $bar->setLegendBoxStyle( 'FFFFFF', '000000', 10 ); $bar->setLegendPosition( 1, 0 ); $bar->setXAxisTextStyle( 'arial.ttf', 10, '000000', 0 ); $bar->setYAxisTextStyle( 'arial.ttf', 10, '000000' ); $bar->setColumnSpacing( 25 ); $bar->setStackedBarSpacing( 0 ); //---- THE DATA $bar->setTitle( 'ChartLogix Bar & Line Graph' ); $bar->addColumns( array( '2002', '2003', '2004', '2005', '2006', '2007' ) ); $bar->doBarSeries( 'Bananas', 'FFFF00', 'FFCC00' ); $bar->setValueStyle(); $bar->addData( '2002', 1498 ); $bar->addData( '2003', 358 ); $bar->addData( '2004', 675 ); $bar->addData( '2005', 1449 ); $bar->addData( '2006', 1335 ); $bar->addData( '2007', 137 ); //---- DRAW PNG $bar->drawPNG( 500, 400 ); ?>
Вывод
Я надеюсь, что вы найдете вышеупомянутые библиотеки полезными, но если вы хотите больше возможностей, проверьте PHPGraphLib и JpGraph . PHPGraph — это легковесная библиотека на стороне сервера, которая полностью бесплатна для любых целей. JpGraph, с другой стороны, предлагает урезанную бесплатную версию. Обе эти библиотеки в настоящее время не находятся в активной разработке, но их текущая стабильная версия все еще работает хорошо.
Диаграммы — это многолюдное пространство, и это ни в коем случае не полный список инструментов, доступных для диаграмм PHP Вместо этого я старался изо всех сил перечислять инструменты, которые имеют проверенный послужной список и облегчили бы вам задачу создания красивых диаграмм.
Используете ли вы другой инструмент построения диаграмм PHP, который я не включил здесь? Хотелось бы узнать об этом в разделе комментариев ниже.