README

A Kirby v3 插件，用于创建 SVG 图表 - 包含电池。

是什么

kirby3-charts 是 SVGGraph 的 Kirby v3 包装器，因此可以创建（几乎）任何类型的图表。

如何使用

使用 Composer 安装此包

composer require fundevogel/kirby3-charts

用法

为了生成图表，我们首先需要一些数据。页面方法 toChart() 接受一个包含数据点的数组作为第一个参数 - 实际上是由两个或多个数组组成的，每个数组包含 color（字符串）和 share（浮点数）

$data = [
    ['title' => 'HTML', 'color' => '#4F5D95', 'share' => 0.6],
    ['title' => 'CSS', 'color' => '#2b7489', 'share' => 0.4],
];

$page->toChart($data);

还有一个适用于结构字段的字段方法 toChart()。包含的示例蓝图 fields/chart 是一个好的起点，大致如下

type: structure
fields:
  title:
    label: Title
    type: text

  share:
    label: share
    type: number
    step: .01

  color:
    label: Color
    type: text

这两种方法都接受另外两个数组进行进一步定制

# SVG settings
$settings = [
    'width' => 100,
    'height' => 100,
    'type' => 'DonutGraph',
    'inline' => false,
];

# Options depend on the type of chart (in this example 'DonutGraph'),
# see https://www.goat1000.com/svggraph.php
$options = [
    'inner_radius' => 2,
    'stroke_width' => 0.5,
    'show_labels' => true,

    # .. etc
];

# Page method
$page->toChart($data, $settings, $options);

# Field method
$page->chartData()->toChart($settings, $options);

注意：这两种方法都返回一个新创建的 SVG 图表的文件对象（除非激活了 inline），以便进一步使用。

配置

您也可以从全局的 config.php 中更改某些默认选项（'fundevogel.charts.optionName'）

示例

# Create SVG chart as page file
$chart = $page->toChart($data, ['type' => 'DonutGraph'], [
    'donut_slice_gap' => 1.5,
    'inner_radius' => 0.7,
    'start_angle'  => -90,
    'stroke_width' => 0,
]);

向之前的示例 $data 中添加更多项并使用上述代码，生成的图表如下所示

鸣谢

此库由 goat1000 编写的广泛用于创建 SVG 图表的库 SVGGraph 支持。

许可

kirby3-charts 使用 MIT 许可证，但 在生产中使用 Kirby 需要 购买许可证。

编码愉快！