feat: add shadows to line charts

This commit is contained in:
Joshua Seigler 2017-03-07 02:57:21 -05:00
parent 6824969071
commit d17faefe88
2 changed files with 15 additions and 4 deletions

View file

@ -78,7 +78,7 @@ namespace NeatCharts {
<feFlood result="flood" flood-color="'.$this->options['shadow'].'" flood-opacity="0.75"></feFlood> <feFlood result="flood" flood-color="'.$this->options['shadow'].'" flood-opacity="0.75"></feFlood>
<feComposite in="flood" result="mask" in2="SourceAlpha" operator="in"></feComposite> <feComposite in="flood" result="mask" in2="SourceAlpha" operator="in"></feComposite>
<feMorphology in="mask" result="dilated" operator="dilate" radius="2"></feMorphology> <feMorphology in="mask" result="dilated" operator="dilate" radius="2"></feMorphology>
<feGaussianBlur in="dilated" result="blurred" stdDeviation="6"></feGaussianBlur> <feGaussianBlur in="dilated" result="blurred" stdDeviation="4"></feGaussianBlur>
<feMerge> <feMerge>
<feMergeNode in="blurred"></feMergeNode> <feMergeNode in="blurred"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode>

View file

@ -14,7 +14,8 @@ namespace NeatCharts {
'xAxisEnabled' => true, 'xAxisEnabled' => true,
'yAxisZero' => false, 'yAxisZero' => false,
'filled' => false, 'filled' => false,
'background' => 'none' 'background' => 'none',
'shadow' => 'none'
]; ];
parent::setOptions($options); parent::setOptions($options);
} }
@ -119,9 +120,19 @@ namespace NeatCharts {
<stop offset="0.5%" stop-color="'.( $this->options['lineColor'] ).'" stop-opacity="0"></stop> <stop offset="0.5%" stop-color="'.( $this->options['lineColor'] ).'" stop-opacity="0"></stop>
<stop offset="2%" stop-color="'.( $this->options['lineColor'] ).'" stop-opacity="1"></stop> <stop offset="2%" stop-color="'.( $this->options['lineColor'] ).'" stop-opacity="1"></stop>
<stop offset="100%" stop-color="'.( $this->options['lineColor'] ).'" stop-opacity="1"></stop> <stop offset="100%" stop-color="'.( $this->options['lineColor'] ).'" stop-opacity="1"></stop>
</linearGradient> </linearGradient>'.( $this->options['shadow'] == 'none' ? '' : '
<filter id="shadow" x="-5000%" y="-5000%" width="10000%" height="10000%">
<feFlood result="flood" flood-color="'.$this->options['shadow'].'" flood-opacity="0.75"></feFlood>
<feComposite in="flood" result="mask" in2="SourceAlpha" operator="in"></feComposite>
<feMorphology in="mask" result="dilated" operator="dilate" radius="2"></feMorphology>
<feGaussianBlur in="dilated" result="blurred" stdDeviation="4"></feGaussianBlur>
<feMerge>
<feMergeNode in="blurred"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>').'
</defs> </defs>
<g class="neatchart">'.( $this->options['yAxisEnabled'] || $this->options['xAxisEnabled'] ? $gridLabelsXML : '').' <g class="neatchart"'.( $this->options['shadow'] == 'none' ? '' : ' filter="url(#shadow)"').'>'.( $this->options['yAxisEnabled'] || $this->options['xAxisEnabled'] ? $gridLabelsXML : '').'
<g class="chart__plotLine" <g class="chart__plotLine"
fill="none" fill="none"
stroke-width="'.( $this->options['fontSize'] / 3 ).'" stroke-width="'.( $this->options['fontSize'] / 3 ).'"