README

Shortdark/Socket从最多10个系列的基于日期的数据数组创建SVG折线图。当前版本假设数据将仅来自工作日，即它期望周末没有数据。公共假日应包含在数组中。空值不表示为线条，包含空值的图表线条将有间隙。如果手动指定额外的线条颜色，则图表上可以有超过10条线条。

安装

$ composer require shortdark/socket

基本用法

<?php

require_once 'vendor/autoload.php';

$socket = new Shortdark\Socket;

$dataArray = [
    ['date'=>'2021-03-05', 'col1'=>116, 'col2'=> 156, 'col3'=>125],
    ['date'=>'2021-03-04', 'col1'=>115, 'col2'=> 155, 'col3'=>109],
    ['date'=>'2021-03-03', 'col1'=>114, 'col2'=> 154, 'col3'=>104],
    ['date'=>'2021-03-02', 'col1'=>113, 'col2'=> 153, 'col3'=>99],
    ['date'=>'2021-03-01', 'col1'=>112, 'col2'=> 152, 'col3'=>94],
    ['date'=>'2021-02-26', 'col1'=>111, 'col2'=> 151, 'col3'=>89]
];

$dataPointsArray = [
    ['date' => '2021-03-05', 'value' => 156, 'volume' => 1],
    ['date' => '2021-03-01', 'value' => 152, 'volume' => 2],
]; 

echo $socket->draw_svg($dataArray, $dataPointsArray);

数据数组

图表可以是空的（0条线）或最多有10条图表线。
可以传递超过10条图表线，但您需要手动为超过前10列的列分配颜色。
线条的数量取决于传递的数据数组。
列必须命名为'date'、'col1'、'col2'、'col3'、'col4'等。
'date'必须是一个字符串，格式为'2021-02-26'。
Y轴数据可以是整数、浮点数或空值。
空值不会在图表上显示。
数组应从最新日期开始，然后回溯。
假设数据将是连续的（周一至周五）且数据无间隙。数据可以是每周7天，但是当前的周线是周五。
应将公共假日也包含在数组中，可以使用前一天相同的值或空值。

表示值范围

如果您有两条线表示最小值和最大值，并且您想在图表上表示它们为范围，即在两条线之间填充颜色，可以将filled_lines变量设置为true。

目前，要么是线条，要么是范围，不能同时两者。
命名约定与普通图表线条相同，但col1和col2之间的空间将被填充，然后是col3和col4之间的空间，依此类推。
它期望偶数条线，每对线条都会被填充。如果存在col3但不存在col4，则该线条将不会显示。
填充的线条是半透明的，因此下面的范围也是可见的。
每个范围的所用颜色是第二条线的颜色，即col2、col4、col6等。

数据点数组

可选。
如果数据点的日期超出图表的日期范围，则将被忽略。
量可以是正数或负数，正点由黑色圆圈表示，负点由红色圆圈表示。

可选自定义

以下显示默认值。每个这些变量都可以更改，如果需要的话。

width_of_svg INT (默认: 1400)
height_of_svg INT (默认: 540)
iterations INT (默认: 10)
colors ARRAY (默认 ['col1' => 'dark green', 'col2' => 'medium blue', 'col3' => 'orange red', 'col4' => 'orange', ...])
fill_opacity FLOAT (默认: 0.5)
show_week_numbers (默认: false)
show_week_lines (默认: true)
show_year_xaxis (默认: true)
month_format (默认: 'short') 可以为 'none', 'letter', 'short' 或 'long'
show_legend_box BOOL (默认: true)
legend_box_width INT (默认: 200)
图例数组（默认 ['col1' => '列 1', 'col2' => '列 2', 'col3' => '列 3', 'col4' => '列 4', ...]）
图形名称 字符串（默认: '关键'）
图例中显示最后值 布尔值（默认: false）
图例前值 字符串（默认: ''）
图例后值 字符串（默认: ''）
品牌URL 字符串（默认: ''）
品牌文本 字符串（默认: ''）
品牌X从右 整数（默认: 120）
品牌Y从下 整数（默认: 15）
填充线 布尔值（默认: false）
最近值 布尔值（默认: false）

您可以像这样修改以上任何/所有内容...

$socket = new Shortdark\Socket;

// Change the width of the SVG
$socket->width_of_svg = 1000;

// Change the height of the SVG
$socket->height_of_svg = 500;

// The number of horizontal lines
$socket->iterations = 10;

// The color of each line
$socket->colors = [
    'col1' => 'blue',
    'col2' => 'green',
    'col3' => 'orange',
    'col4' => 'red'
];

// Whether to show the week number from the start of the year (every fifth week: 5, 10...)
$socket->show_week_numbers = true;

// The dates for the x-axis must be in the format YYY-mm-dd, but do we want to display the year?
$socket->show_year_xaxis = false;

// Which month format to display on the x-axis
$socket->month_format = 'letter'; // 'none', 'letter', 'short', or 'long'

// Optional, show a legends box to describe each graphline
$socket->show_legend_box = true;

// Optional, legends box, specify the width of the box
$socket->legend_box_width = 150;

// Give each graph line a label in the "legends box"
$socket->legends = [
    'col1' => 'This is column 1',
    'col2' => 'The second column',
    'col3' => 'Third',
    'col4' => 'Lastly... another'
];
$socket->graph_name = 'Something vs. Something else vs Another';
$socket->show_last_value_in_legend = true;
$socket->legend_pre_value = '&dollar;';
$socket->legend_post_value = '&#37;';

// The text/link in the bottom right hand corner
$socket->branding_text = 'Shortdark Web Dev';
$socket->branding_url = 'https://shortdark.co.uk';
$socket->brand_x_from_right = 0;
$socket->brand_y_from_bottom = 0;

// Representing two lines as a range, i.e. the space between the two lines is filled
$socket->filled_lines = false;

// Generally the graph starts/ends at a multiple of 10, the nearest value would be the nearest number above or below the max/min value.
$socket->nearest_value = false;

echo $socket->draw_svg($dataArray);

作者

Neil Ludlow - neil@shortdark.net - https://shortdark.co.uk

shortdark / socket

维护者

详细信息