README

此封装器的目的是让 PHP 用户能够仅使用 PHP 代码快速、轻松地创建交互式图表。 无需 JavaScript。

初始设置

手册

通过点击本页顶部附近的绿色“克隆或下载”按钮下载此存储库。
点击“下载 Zip”选项开始下载。
将文件“ZC.php”复制到您的项目源目录中。
在您的项目中包含 ZingChart 库 <script src="//cdn.zingchart.com/zingchart.min.js"></script>。
使用 'include' 语法在您的项目中包含此封装器。例如) include ZC.php。
包含后，在您的代码中使用适当的命名空间：use ZingChart\PHPWrapper\ZC;。

include 'ZC.php';
use ZingChart\PHPWrapper\ZC;

$datay = array();
$a = 6.619;
$b = 0.113;
$index = 0;
for ($x = 50; $x < 600; $x += 50, $index++) {
    array_push($datay, $a + $b*$x);
}

$zc = new ZC("myChart");
$zc->setChartType("line");
$zc->setTitle("PHP 5.6 render");
$zc->setSeriesData(0, $datay);
$zc->setChartHeight("400px");
$zc->setChartWidth("100%");
$zc->render();

Composer

我们在 Packagist 上的位置这里。

使用 Composer 下载此包：composer require zingchart/php_wrapper。
在您的项目中自动加载包依赖项：require __DIR__ . '/vendor/autoload.php;。
在您的代码中引用此库：use ZingChart\PHPWrapper\ZC;。

快速入门

从 MySQL 拉取绘图数据

$zc = new ZC("myChart");
$zc->connect($host,$port,$uName,$pswd,$db);
$data = $zc->query($mySqlQuery, true);
$zc->setSeriesData($data[1]);
$zc->render();
$zc->closeConnection();

代码分解

$zc = new ZC("myChart");
使用您希望嵌入图表的 HTML 元素的 ID 实例化 ZC 对象。例如，<div id="myChart"></div>。
$zc->connect($host,$port,$uname,$pswd,$db);
建立与您的数据库的连接。
$data = $zc->query($mySqlQuery, $scaleXLabelsFlag);
使用有效的 SQL 查询字符串查询数据库并将返回值设置到变量中。
注意： 此函数的第二个参数接受一个布尔值，告诉此函数是否应将 SQL 查询返回的第一个字段视为 scaleXLabels。
$zc->setSeriesData($data[1]);
使用从 SQL 查询中存储的数据设置绘图数据，即 $data[1] 是绘图数据，$data[0] 在此情况下包含 X 轴刻度标签。这是因为我们将 $scaleXLabelsFlag 设置为 'true'，因此我们的数组中的第一个数据集将包含这些标签在索引 0 的数组中。绘图数据存储在另一个索引 1 的数组中。
$zc->render();
将数据渲染为默认的 'Area' 图表类型。如果您希望使用不同的图表类型，则可以简单地使用另一个函数调用 $zc->setChartType("bar"); 或通过覆盖构造函数方法 $zc = new ZC("myChart", "bar"); 来设置它。
$zc->closeConnection();
确保在使用完毕后关闭数据库连接。

在没有 MySQL 数据库的情况下绘制数据

$zc = new ZC("myChart");
$zc->setSeriesData([1,4,2,6,3]);
$zc->render();

代码分解

$zc = new ZC("myChart");
使用您希望嵌入图表的 HTML 元素的 ID 实例化 ZC 对象。例如，<div id="myChart"></div>。
$zc->setSeriesData(0, [1,4,2,6,3]);
使用值数组设置绘图数据。您甚至可以使用数组数组来绘制多个系列，如下所示：$zc->setSeriesData([[12,35,24],[3,9,7]);
$zc->render();
将数据渲染为默认的 'Area' 图表类型。如果您希望使用不同的图表类型，则可以简单地使用另一个函数调用 $zc->setChartType("bar"); 或通过覆盖构造函数 $zc = new ZC("myChart", "bar");。

实时演示

用法

构造函数
ZC - ZingChart 的构造函数。支持重载。

这个包装器有三个可用性级别。

级别 1 - 内置函数用于设置和获取图表数据。功能有限 库功能。

render - 渲染图表。此方法必须在您可选地配置了图表之后调用。

connect - 建立到您的 MySQL 数据库的连接。
closeConnection - 关闭到您的 MySQL 数据库的连接。
query - 查询您的数据库，并以数组的形式返回您的数据。
getFieldNames - 获取上面 query 函数返回的 MySQL 字段名。

setTitle - 设置图表标题。预期参数：String。
setSubtitle - 设置图表副标题。预期参数：String。
setLegendTitle - 设置图表图例的标题。预期参数：String。
setScaleXTitle - 设置图表 x 轴标题。
setScaleYTitle - 设置图表 y 轴标题。
setScaleXLabels - 设置图表 x 轴的刻度值。
setScaleYLabels - 设置图表 y 轴的刻度值。
setSeriesData - 设置图表绘图数据。即）要绘制的图形数据。
setSeriesText - 设置图表数据标签。即）用于工具提示、valueBox 等。

setChartType - 设置图表类型。即）区域、条形、折线、饼图等。
setChartWidth - 设置图表宽度。 注意： 默认为 100%。
setChartHeight - 设置图表高度。 注意： 默认为 400px。
setChartTheme - 设置图表颜色主题。即）浅色、深色、经典。
setFullscreen - 设置图表的宽度和高度以适应窗口。

enableScaleXZooming - 启用图表 x 轴的缩放。
enableScaleYZooming - 启用图表 y 轴的缩放。
enableCrosshairX - 启用图表 x 轴的十字准线引导。 注意： 默认开启。
enableCrosshairY - 启用图表 y 轴的十字准线引导。
enableTooltip - 启用图表工具提示。
enableValueBox - 启用图表 valueBox。
enablePreview - 启用图表预览区域。

disableScaleXZooming - 关闭图表在x轴上的缩放。
disableScaleYZooming - 关闭图表在y轴上的缩放。
disableCrosshairX - 关闭图表在x轴上的十字线。
disableCrosshairY - 关闭图表在y轴上的十字线。
disableTooltip - 关闭图表的提示信息。
disableValueBox - 关闭图表的值框。
disablePreview - 关闭图表的预览区域。

getTitle - 获取图表标题。
getSubtitle - 获取图表副标题。
getLegendTitle - 获取图表图例标题。
getConfig - 获取图表的JSON配置。
getScaleXTitle - 获取图表x轴标题。
getScaleYTitle - 获取图表y轴标题。
getScaleXLabels - 获取图表x轴刻度值。
getScaleYLabels - 获取图表y轴刻度值。
getSeriesData - 获取图表绘图数据/值。
getSeriesText - 获取图表绘图数据标签/文本。
第二级 - 使用点符号设置更深入的图表数据。 无限制 原库功能。

setConfig - 此函数允许您使用点符号设置单个图表属性的值。
第三级 - 完整的JSON语法以实现完全控制。 无限制 原库功能。

trapdoor - 此函数允许您通过单个函数调用设置整个图表的配置。

文档

ZC ( elemId [,chartType="area" [,theme="light" [,width="100%" [,height="400"]]]] ) `构造函数`

默认行为：此方法被重载以接受：1，2，3，4或5个参数。参数顺序很重要。请参见下面的示例。

示例

$zc = new ZC("chartDiv");
$zc = new ZC("chartDiv", "line");
$zc = new ZC("chartDiv", "line", "dark");
$zc = new ZC("chartDiv", "line", "dark", "600");
$zc = new ZC("chartDiv", "line", "dark", "600", "400");
$zc = new ZC("chartDiv", null, "dark");
$zc = new ZC("chartDiv", "bar", null, 600, 400);

注意：第一个参数是必需的，以正确渲染您的图表。此第一个参数对应于您希望将图表放入的HTML元素的ID。

render ( ) `第一级`

将图表渲染到构造函数中指定的HTML元素。

示例

$zc->render();

getRenderScript ( ) `第一级`

此函数返回render函数将打印的文本。

示例

$chart1Script = $zc->getRenderScript();// This stores the script, to be printed later
echo $chart1Script;// This will render the chart

connect ( host, port, username, pswd, db ) `第一级`

建立与您的MySQL数据库的连接。

示例

$zc->connect("127.0.0.1","8889","root","root","mydb");

closeConnection ( ) `第一级`

关闭与MySQL数据库的连接。

示例

$zc->closeConnection();

query ( sqlQuery, scaleXLabelsFlag ) `第一级`

使用您提供的查询字符串查询MySQL数据库。 注意： 接受第二个参数，该参数期望一个布尔值，表示是否将SQL查询返回的第一个字段作为x轴刻度标签处理。

示例

$queryStr = "SELECT timestamp, unitsSold, expected, anotherMetric FROM feed_data";
$zc->query($queryStr, true);

在上面的代码片段中，我们将 scaleXLabelsFlag 设置为 true，因为我们从 SQL 查询中返回 'timestamps' 数据，希望将其设置为 x 轴的刻度标签。如果我们不想显式设置 x 轴标签，则代码可以如下所示

$queryStr = "SELECT unitsSold, expected, anotherMetric FROM feed_data";
$zc->query($queryStr, false);

getFieldNames ( ) `一级`

获取上述 query 函数返回的 MySQL 字段名。

示例

$fieldNames = $zc->getFieldNames();

setTitle ( theChartTitle ) `一级`

设置图表标题。预期参数：字符串。

示例

$zc->setTitle("Sandwiches Consumed");

setSubtitle ( theSubtitle ) `一级`

设置图表副标题。预期参数：字符串。

示例

$zc->setSubtitle("March 1 thru March 31, 2016");

setLegendTitle ( theLegendTitle ) `一级`

设置图表图例的标题。预期参数：字符串。

示例

$zc->setLegendTitle("Sandwich Types");

setScaleXTitle ( xAxisTitle ) `一级`

设置图表 x 轴标题。

示例

$zc->setScaleXTitle("Quantity");

setScaleYTitle ( yAxisTitle ) `一级`

设置图表 y 轴标题。

示例

$zc->setScaleYTitle("Date");

setScaleXLabels ( xAxisLabels ) `一级`

设置图表 x 轴的刻度值。

示例

$zc->setScaleXLabels(array("Mar 1", "Mar 2", "Mar 3));

setScaleYLabels ( yAxisValueRange ) `一级`

设置图表 y 轴的刻度值范围和增量。

示例

$zc->setScaleYLabels(array("0:10:100");

setSeriesData ( [,seriesIndex], plotDataArray ) `一级`

设置图表绘图数据。即）要绘制的数据。seriesIndex 是一个可选参数。如果省略，则函数将假设 plotDataArray 包含所有系列的所有数据。

示例

$zc->setSeriesData(0, [5,7,11]);
$zc->setSeriesData([[3,7,1], [20,32,37], [1,25,48]]);

setSeriesText ( [,seriesIndex], seriesText ) `一级`

设置图表数据标签。即）用于工具提示、值框等。此函数有两种重载方式。

一个参数 - （[]）: 值数组。将此数组中的每个元素应用于相应的系列文本。
两个参数 - （i，"value"）: i 是应用 "value" 的系列索引。

示例

$zc->setSeriesText(["BLT","Tuna","Club"]); // applies "BLT" to series[0], "Tuna" to series[1],..
$zc->setSeriesText(0, "BLT");              // applies "BLT" to series[0]

setChartType ( theType ) `一级`

设置图表类型。即）区域、柱状图、折线图、饼图等。

示例

$zc->setChartType("line");

setChartWidth ( chartWidth ) `一级`

设置图表宽度。注意： 默认为 100%。

示例

$zc->setChartWidth("600"); // in pixels
$zc->setChartWidth("100%");

setChartHeight ( chartHeight ) `一级`

设置图表高度。注意： 默认为 400px。

示例

$zc->setChartHeight("400"); // in pixels
$zc->setChartHeight("50%");

setChartTheme ( chartTheme ) `一级`

设置图表颜色主题。即）浅色、深色、经典

有限选项： "light" | "dark" | "classic"

示例

$zc->setChartTheme("dark");

setFullscreen ( ) `一级`

切换图表以适应窗口。调用此方法两次将禁用全屏。

示例

$zc->setFullscreen();

enableScaleXZooming ( ) `一级`

在 x 轴上启用图表缩放。

示例

$zc->enableScaleXZooming();

enableScaleYZooming ( ) `一级`

在 y 轴上启用图表缩放。

示例

$zc->enableScaleYZooming();

enableCrosshairX ( ) `一级`

在 x 轴上启用图表十字准线引导。 注意： 默认启用。

示例

$zc->enableCrosshairX();

enableCrosshairY ( ) `一级`

在 y 轴上启用图表十字准线引导。

示例

$zc->enableCrosshairY();

enableTooltip ( ) `一级`

启用图表工具提示。

示例

$zc->enableTooltip();

enableValueBox ( ) `一级`

启用图表值框。

示例

$zc->enableValueBox();

enablePreview ( ) `一级`

启用图表预览区域。

示例

$zc->enablePreview();

disableScaleXZooming ( ) `一级`

关闭 x 轴上的图表缩放。

示例

$zc->disableScaleXZooming();

disableScaleYZooming ( ) `一级`

关闭 y 轴上的图表缩放。

示例

$zc->disableScaleYZooming();

disableCrosshairX ( ) `一级`

关闭 x 轴上的图表十字准线。

示例

$zc->disableCrosshairX();

disableCrosshairY ( ) `一级`

关闭 y 轴上的图表十字准线。

示例

$zc->disableCrosshairY();

disableTooltip ( ) `一级`

关闭图表工具提示。

示例

$zc->disableTooltip();

disableValueBox ( ) `一级`

关闭图表值框。

示例

$zc->disableValueBox();

disablePreview ( ) `一级`

关闭图表预览区域。

示例

$zc->disablePreview();

getTitle ( ) `一级`

获取图表标题。

示例

$chartTitle = $zc->getTitle();

getSubtitle ( ) `一级`

获取图表副标题。

示例

$chartSubtitle = $zc->getSubtitle();

getLegendTitle ( ) `一级`

获取图表图例标题。

示例

$legendTitle = $zc->getLegendTitle();

getConfig( ) `一级`

获取图表的JSON配置。

示例

$config = $zc->getConfig();

getScaleXTitle( ) `一级`

获取图表x轴标题。

示例

$xAxisTitle = $zc->getScaleXTitle();

getScaleYTitle( ) `一级`

获取图表y轴标题。

示例

$yAxisTitle = $zc->getScaleYTitle();

getScaleXLabels( ) `一级`

获取图表x轴刻度值。

示例

$xAxisLabels = $zc->getScaleXLabels();

getScaleYLabels( ) `一级`

获取图表y轴刻度值。

示例

$yAxisLabels = $zc->getScaleYLabels();

getSeriesData( ) `一级`

获取图表绘图数据/值。

示例

$plotValues = $zc->getSeriesData();

getSeriesText( ) `一级`

获取图表绘图数据标签/文本。

示例

$plotSeriesText = $zc->getSeriesText();

setConfig( ) `二级`

这是一个接受点语法的字符串的单个函数。此函数允许您设置单个图表属性的值。

示例

$zc->setConfig("legend.header.background-color", "red");
$zc->setConfig("series[1].values", array(5,9,13,10,22,39));

您还可以传入关联数组，从给定的根属性设置多个属性，如下所示

$legendConfig = array(
    "header" => array(
        "background-color" => "red"
    ),
    "marker" => array(
        "border-color" => "orange",
        "border-width" => "3px",
        "shadow-angle" => "115"
    )
);

$zc->setConfig("legend", $legendConfig);

此语法是ZingChart JSON语法的紧密衍生品，除了使用点来表示子对象的导航。

trapdoor( ) `三级`

这是一个接受完整JSON字符串的单个函数。此函数允许您通过单个函数调用设置整个图表的配置。此JSON字符串可以使用标准的PHP关联数组语法生成。

注意：使用trapdoor将覆盖该对象之前设置的任何图表配置。

例如，如果您设置了$zc->setLegendTitle("Cool Title")，然后使用$zc->trapdoor("series":[{"values": [1,2,3]}, {"values":[22,23,27]})，那么图例标题将被破坏。

示例

$myConfig = array(
    "legend" => array(
        "header" => array(
            "background-color" => "red"
        ),
        "marker" => array(
            "border-color" => "orange",
            "border-width" => "3px",
            "shadow-angle" => "115"
        )
    ),
    "series" => array(
        array(
            "values" => array(33,45,27,32,15),
            "text"   => "Apples"
        ),
        array(
            "values" => array(1,5,9,3,7),
            "text"   => "Oranges"
        )
    )
);
$zc->trapdoor(json_encode($myConfig));

或者您可以传入JSON字符串，如下所示

$jsonString = <<< EOT
{
    "legend":{
        "header":{
            "background-color":"red"
        },
        "marker":{
            "border-color":"orange",
            "border-width":"3px",
            "shadow-angle":"115"
        }
    },
    "series":[
    {
        "values":[33,45,27,32,15],
        "text":"Apples"
    },
    {
        "values":[1,5,9,3,7],
        "text":"Oranges"
    }]
}
EOT;

$zc->trapdoor($jsonString);

在这里需要注意的一点是，如果您使用数组方法，那么您必须在调用render方法渲染图表时，使用json_encode(...)将您的数组前置。

成品
以下三行代码将生成一个600x400像素的面积图，以浅色主题渲染在id为'myChart'的html元素中。

$zc = new ZC("myChart", "area", "light", 600, 400);
$zc->trapdoor(json_encode($myConfig));
$zc->render();

在线演示

仪表板

问题、贡献或请求

功能缺失？有什么出问题了吗？
在这里的GitHub仓库中发布您的问题、评论和问题。我们欢迎您提出的任何意见，并将愉快地迅速回应。您也可以随意分叉此仓库以添加您喜欢的任何附加功能。

感谢您阅读这篇教程。
使用ZingChart快乐地PHP图表制作

zingchart / php_wrapper

维护者

详细信息

README

初始设置

手册

Composer

快速入门

从 MySQL 拉取绘图数据

在没有 MySQL 数据库的情况下绘制数据

实时演示

用法

文档

ZC ( elemId [,chartType="area" [,theme="light" [,width="100%" [,height="400"]]]] ) 构造函数

render ( ) 第一级

getRenderScript ( ) 第一级

connect ( host, port, username, pswd, db ) 第一级

closeConnection ( ) 第一级

query ( sqlQuery, scaleXLabelsFlag ) 第一级

getFieldNames ( ) 一级

setTitle ( theChartTitle ) 一级

setSubtitle ( theSubtitle ) 一级

setLegendTitle ( theLegendTitle ) 一级

setScaleXTitle ( xAxisTitle ) 一级

setScaleYTitle ( yAxisTitle ) 一级

setScaleXLabels ( xAxisLabels ) 一级

setScaleYLabels ( yAxisValueRange ) 一级

setSeriesData ( [,seriesIndex], plotDataArray ) 一级

setSeriesText ( [,seriesIndex], seriesText ) 一级

setChartType ( theType ) 一级

setChartWidth ( chartWidth ) 一级

setChartHeight ( chartHeight ) 一级

setChartTheme ( chartTheme ) 一级

setFullscreen ( ) 一级

enableScaleXZooming ( ) 一级

enableScaleYZooming ( ) 一级

enableCrosshairX ( ) 一级

enableCrosshairY ( ) 一级

enableTooltip ( ) 一级

enableValueBox ( ) 一级

enablePreview ( ) 一级

disableScaleXZooming ( ) 一级

disableScaleYZooming ( ) 一级

disableCrosshairX ( ) 一级

disableCrosshairY ( ) 一级

disableTooltip ( ) 一级

disableValueBox ( ) 一级

disablePreview ( ) 一级

getTitle ( ) 一级

getSubtitle ( ) 一级

getLegendTitle ( ) 一级

getConfig( ) 一级

getScaleXTitle( ) 一级

getScaleYTitle( ) 一级

getScaleXLabels( ) 一级

getScaleYLabels( ) 一级

getSeriesData( ) 一级

getSeriesText( ) 一级

setConfig( ) 二级

trapdoor( ) 三级