Title: Page Charts
Author: sidov
Published: <strong>2022 年 2 月 15 日</strong>
Last modified: 2022 年 5 月 6 日

---

搜索插件

![](https://ps.w.org/page-charts/assets/banner-772x250.png?rev=2679170)

**该插件尚未通过WordPress的最新3个主要版本进行测试**。 当与较新版本的WordPress一起
使用时，可能不再受到维护或支持，并且可能会存在兼容性问题。

![](https://ps.w.org/page-charts/assets/icon-128x128.png?rev=2679251)

# Page Charts

 作者：[sidov](https://profiles.wordpress.org/sidov/)

[下载](https://downloads.wordpress.org/plugin/page-charts.zip)

 * [详情](https://cn.wordpress.org/plugins/page-charts/#description)
 * [评价](https://cn.wordpress.org/plugins/page-charts/#reviews)
 *  [安装](https://cn.wordpress.org/plugins/page-charts/#installation)
 * [开发进展](https://cn.wordpress.org/plugins/page-charts/#developers)

 [支持](https://wordpress.org/support/plugin/page-charts/)

## 描述

This plagin lets you to embed charts of Chart and Highcharts softwares on any page
or post of your site.
 For this you should include one of above mentioned libraries
in the “js” directiory of this plagin. For every chart you must prepare two files:
one of them it’s a javascript file with the Highchart object, other one it’s a php
file with data for chart. Interface between php and js represents array with the
name “data”. To this array you can include all variables and arrays necessary for
the Highchart object.

    ```
    For example in the php file:
    $data= [['name'=> 'Installation','data'=> [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]], 
        [
        'name'=> 'Manufacturing',
        'data'=> [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    ], [
        'name'=> 'Sales & Distribution',
        'data'=> [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    ], [
        'name'=> 'Project Development',
        'data'=> [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
    ], [
        'name'=> 'Other',
        'data'=> [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    ]];

    In the javascript file:

    new Chart(document.getElementById("container"), {
    ...
      data: data
    ...  
    }
    ```

If you want to use static data right in the js you should prepare a php file with
void array “data”.
 All js files you should include in the folder “js” and php files
in the “php” folder. For rendering the chart on the chosen page You should put necessary
HTML tag with the corresponding id in the chosen line.

For Chart library you should wrap canvas tags in div tag.

For example:

< div style=”width:800px; height = 450px !important;” > < canvas id=”container” 
class = “container” width=”800″ height=”450″ > < /canvas > < /div >

After activating plagin you should select field “Page Charts” in the menu “Plagins”
of your admin panel.
 In the drop-down list with the label “Choose a chart library”
you should choose appropriate software. Do not forget to include chosen software
library in the “js” folder of the plagin! In the table on the the plagin page you
should select page or post where you want to insert your chart by clicking “add 
new chart”. In the appeared line you should put the names of your php and js files
and click “change”. Be shure that id in your div on the page and container name 
of the javascript chart object are the same. If you want to use several charts on
the same page use “duplicate” button and do the same as above. Don’t forget to use
different container’s ids on the same page! You can preview your chart on the admin
page by clicking “preview the chart”.

## 屏幕截图

[⌊Initial administration page of this plugin.⌉⌊Initial administration page of this
plugin.⌉[

Initial administration page of this plugin.

[⌊Administration page of this plugin after choosing of the library, inputing the
file names and clicking on "preview the chart".⌉⌊Administration page of this plugin
after choosing of the library, inputing the file names and clicking on "preview 
the chart".⌉[

Administration page of this plugin after choosing of the library, inputing the file
names and clicking on “preview the chart”.

## 安装

 1. Upload the “page-charts” folder to the ‘/wp-content/plugins’ directory.
 2. Upload the necessary library software(Chart or Highcharts) in the “js” folder of
    the plagin.
 3. Activate the plugin through the ‘Plugins’ menu in WordPress.

## 常见问题

### How to choose post where I want to render my chart?

In the table of the the plagin page you should select page or post where you want
to insert your chart by clicking
 “add new chart”.

### How to embed my chart on the chosen page?

To embed the chart on the chosen page you should put HTML tag “canvas” for Chart
library or “div” tag for the Highcharts
 library with the necessary id in the chosen
line of the page.

For example:

Text text text…
 < div style=”width:800px; height = 450px !important;” > < canvas
id=”container” class = “container” width=”800″ height=”450″ > < /canvas > < /div
> text text text…

### How to prepare chart for rendering?

For every chart you must prepare two files : one of them it’s javascript file with
the javascript chart object,
 other one it’s a php file with data for chart. Interface
between php and js represents array with the name “data”. To this array you can 
include all variables and arrays necessary for the javascript chart object.

## 评价

此插件暂无评价。

## 贡献者及开发者

「Page Charts」是开源软件。 以下人员对此插件做出了贡献。

贡献者

 *   [ sidov ](https://profiles.wordpress.org/sidov/)

[帮助将「Page Charts」翻译成简体中文。](https://translate.wordpress.org/projects/wp-plugins/page-charts)

### 对开发感兴趣吗?

您可以[浏览代码](https://plugins.trac.wordpress.org/browser/page-charts/)，查看[SVN仓库](https://plugins.svn.wordpress.org/page-charts/)，
或通过[RSS](https://plugins.trac.wordpress.org/log/page-charts/?limit=100&mode=stop_on_copy&format=rss)
订阅[开发日志](https://plugins.trac.wordpress.org/log/page-charts/)。

## 额外信息

 *  版本 **1.0**
 *  最后更新：**4 年前**
 *  活跃安装数量 **不到10**
 *  WordPress 版本 ** 5.8.3 或更高版本 **
 *  已测试的最高版本为 **6.0.17**
 *  语言
 * [English (US)](https://wordpress.org/plugins/page-charts/)
 * 标签
 * [chart](https://cn.wordpress.org/plugins/tags/chart/)[column](https://cn.wordpress.org/plugins/tags/column/)
   [highcharts](https://cn.wordpress.org/plugins/tags/highcharts/)[line](https://cn.wordpress.org/plugins/tags/line/)
   [Pie](https://cn.wordpress.org/plugins/tags/pie/)
 *  [高级视图](https://cn.wordpress.org/plugins/page-charts/advanced/)

## 评级

尚未提交反馈。

[您的评价](https://wordpress.org/support/plugin/page-charts/reviews/#new-post)

[查看全部评论](https://wordpress.org/support/plugin/page-charts/reviews/)

## 贡献者

 *   [ sidov ](https://profiles.wordpress.org/sidov/)

## 支持

有话要说吗？是否需要帮助？

 [查看支持论坛](https://wordpress.org/support/plugin/page-charts/)