{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 太酷不给撩 的问题《Array to SVG, flexible algorithm with PHP》','https://www.manongdao.com/q-337242.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
problem: I've a couple of different arrays - e.g.:
[0.21, 0.001, 0.0245, 0.31, 0.05, ...]
[1234, 1342, 1232, 1625, 2200, 2205, 1804, ...]
[5, 12, 42, 2, 32, 42, ...]
my problem now is:
I'm looking for an algorithm to calculate a SVG Path for a simple chart like:
my current problem is the general algorithm and the calculating of the viewbox for each SVG.
at the moment I've stored an example like:
{
"path": ".....",
"min_value": 2, // min. value of array
"max_value": 31, // max. value of array
"raw_data": [2, 3, 3, 5, 25, 31],
}EDIT:
Now I added dynamic step calculation like:
$step = (($width/$height) * (max($points)-min($points)))/count($points);
so the current code looks like:
$width=200;
$height=50;
$paths = '';
$i= 0;
$j = 0;
$step = (($width/$height) * (max($points)-
min($points)))/count($points);
foreach($points as $point) {
if($j == 0) {
$paths = 'M 0 '.$point;
}
else if($j == 1) {
$paths .= ' L '.$i.' '.$point;
}
else {
$paths .= ' '.$i.' '.$point;
}
$i+=$step;
$j++;
}
$viewbox = '0 0 '.(count($points)+1).' '.(max($points)+1);
now it looks much better - but still have the following problem:
small values (all < 1.0) and stroke-width=1px:
<svg width="200" height="50" viewBox="0 0 31 1.99" style="background-color: white;">
<path fill="none" stroke="blue" stroke-width="1px" d="M 0 0.91 L 0.12333333333333 0.16 0.24666666666667 0.285 0.37 0.845 0.49333333333333 0.87 0.61666666666667 0.14 0.74 0.935 0.86333333333333 0.955 0.98666666666667 0.51 1.11 0.855 1.2333333333333 0.41 1.3566666666667 0.97 1.48 0.115 1.6033333333333 0.095 1.7266666666667 0.885 1.85 0.49 1.9733333333333 0.83 2.0966666666667 0.115 2.22 0.555 2.3433333333333 0.99 2.4666666666667 0.23 2.59 0.21 2.7133333333333 0.14 2.8366666666667 0.265 2.96 0.435 3.0833333333333 0.11 3.2066666666667 0.485 3.33 0.725 3.4533333333333 0.48 3.5766666666667 0.065"/>
</svg>
big values (all >1000.0) and stroke-width=100px:
<svg width="200" height="50" viewBox="0 0 31 4797.885" style="background-color: white;">
<path fill="none" stroke="blue" stroke-width="1px" d="M 0 3401.91 L 185.99666666667 3515.16 371.99333333333 4007.285 557.99 4149.845 743.98666666667 4141.87 929.98333333333 4176.14 1115.98 4227.935 1301.9766666667 4416.955 1487.9733333333 4594.51 1673.97 4486.855 1859.9666666667 4302.41 2045.9633333333 4413.97 2231.96 4584.115 2417.9566666667 4740.095 2603.9533333333 4796.885 2789.95 4629.49 2975.9466666667 4567.83 3161.9433333333 4484.115 3347.94 4383.555 3533.9366666667 4363.99 3719.9333333333 4362.23 3905.93 4352.21 4091.9266666667 4236.14 4277.9233333333 4120.265 4463.92 4049.435 4649.9166666667 4046.11 4835.9133333333 4138.485 5021.91 4165.725 5207.9066666667 4242.48 5393.9033333333 4358.065"/>
</svg>
all charts should use 100% of the space in width & height with the same stroke width.
What is so hard on generating SVG path ? Here example of SVG:
So hard code the header and tags ... and then just create the
d=""part including your path points ... Start with commandMmove and then for the rest use justL(line to, You do not need to repeat the L command until a different command is used). Uppercase means Absolute coordinates and lowercase commands means relative coordinates. Here preview:See SVG specs for the path commands usage ... If your data contains x,y points then it would be like this:
So just create php script generating such content from your array.
The important part is the viewBox and view defining the browser view. If not set properly or at all than some brownsers will not render your SVG properly.
Using your sample array and x-step = 1 I got:
so let use
x=<-1,+6>andy=<1,32>as view box (min max + some border):As you can see the Y axis is going down, you can either adjust the y positions or use matrix for that ...
[Edit2] I created C++/VCL script (as promissed) for this
Here output:
You forgot the
transformand you also need to set the stroke widthpxproperly.