README

使用 PHP 生成简单的 SVG 格式折线图

安装

您可以通过 composer 安装此包。

composer require ondrej-vrto/php-linechart

使用方法

$data = [0, 2, 1, 3, 3, 2, 1, 5, 4];

$svg = LineChart::new($data)->make();

创建以下 svg 字符串

<svg viewBox="0 0 200 30" width="200" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient x2="0" y1="1" id="color-44dac552-0a1b-4b31-9c35-8bda05443b6f">
            <stop stop-color="#fbd808" offset="0"></stop>
            <stop stop-color="#ff9005" offset="0.34"></stop>
            <stop stop-color="#f9530b" offset="0.67"></stop>
            <stop stop-color="#ff0000" offset="1"></stop>
        </linearGradient>
        <mask id="linechart-44dac552-0a1b-4b31-9c35-8bda05443b6f">
            <polyline
                stroke="#fff"
                stroke-width="2"
                fill="transparent"
                stroke-linecap="round"
                stroke-linejoin="round"
                vector-effect="non-scaling-stroke"
                transform="scale(24.75 -5.6) translate(0.0404 -5.1786)"
                points="0 0 1 2 2 1 3 3 4 3 5 2 6 1 7 5 8 4">
            </polyline>
        </mask>
    </defs>
    <g>
        <rect
            width="200"
            height="30"
            fill="url(#color-44dac552-0a1b-4b31-9c35-8bda05443b6f)"
            mask="url(#linechart-44dac552-0a1b-4b31-9c35-8bda05443b6f)"
        />
    </g>
</svg>

生成的 svg 看起来是这样的。

输入数据类型

$data = [0, 1, 2, 3];          // integers
$data = [0.12, 1.5555, 5.4];   // decimal numbers
$data = [true, false, true];   // booleans
$data = ["0", "002", "4.05"];  // numbers in string
$data = collect([0, 1, 2, 3]); // Illuminate\Support\Collection from Laravel
$data = [5];                   // one value => prepend zero value
$data = [];                    // empty array => set two zero value
$data = [null];                // null => set two zero value

可以使用展开运算符和逐个插入值。

$svg = LineChart::new(0, 1, 2, 3, 4, 5)->make();

来自 Laravel Eloquent 查询的示例数据。

$collection = WebVisits::query()
    ->select(['day_visit_count'])
    ->whereMorphedTo('visitable', $model)
    ->orderByDesc('date')
    ->limit(365)
    ->get()
    ->pluck('day_visit_count');

$svg = LineChart::new($collection)->make();

自定义

$svg = LineChart::new($data)
    ->withStrokeWidth(5)
    ->withOrderReversed()
    ->withMaxItemAmount(50)
    ->withLockYAxisRange(200)
    ->withDimensions(500, 100)
    ->withColorGradient('Green', 'Orange', 'Red')
    ->make();

• withStrokeWidth 将确定线条的宽度
• withOrderReversed 反转值的顺序
• withMaxItemAmount 将确定将显示多少个值。如果您最初传递的值多于这个最大值，则将省略最老的值。如果最大数量设置为比当前数量更高的数字，则图表将扩展。
• withLockYAxisRange 设置垂直轴的最大值。如果您有多个图表需要具有相同的长度垂直刻度，则非常有用。默认情况下，最大值根据输入值确定。
• withDimensions 将确定渲染 SVG 的宽度和高度
• withColorGradient 您可以选择任意数量的颜色。从这些颜色中自动生成图表的渐变。

方法 withColorGradient() 的可能颜色值类型

    text   :  Blue, Orange, Cyan, ...
    hex    :  #0000ff, #eee, ...
    rgb    :  rgb(0, 0, 255)
    rgba   :  rgba(0, 0, 255, 1.0)
    hsl    :  hsl(240, 100%, 50%)
    hsla   :  hsla(240, 100%, 50%, 1.0)
    cmyk   :  cmyk(100%,100%,0%,0%)
    xyz    :  xyz(18.05, 7.22, 95.05)
    hsb    :  hsb(241, 100%, 50%)
    CIELab :  CIELab(32.3, 79.2, -107.86)

颜色渐变示例

$svg = LineChart::new($data)
    ->withColorGradient('rgb(48, 231, 237)', 'rgb(0, 166, 215)', 'rgb(0, 88, 179)', 'rgb(0, 27, 135)')
    ->make();

测试

composer test

变更日志

有关最近更改的更多信息，请参阅变更日志。

致谢

• Ondrej Vrťo
• 所有贡献者

替代方案

• brendt/php-sparkline

许可证

MIT 许可证 (MIT)。有关更多信息，请参阅许可证文件。