SVG圖表

圖表是使用SVG過濾器創建的,此圖表的背景是應用了模糊過濾器的真實圖形(不僅僅是圖像)-
SVG圖表

參考以下實現代碼 -

<html>
<head>
<style>
#chartdiv {
    width        : 96%;
    height        : 475px;
    font-size    : 11px;
     margin-left: auto;
    margin-right: auto;  
      margin-top:15px;
}    

.amcharts-graph-g1 .amcharts-graph-fill {
  filter: url(#blur);
}

.amcharts-graph-g2 .amcharts-graph-fill {
  filter: url(#blur);
}

.amcharts-cursor-fill {
  filter: url(#shadow);
}                            
</style>
<script src="amcharts.js"></script>
<script src="serial.js"></script>
<script src="none.js"></script>
<script>
var chartData = [{
   "year": "2000",
       "cars": 1691,
       "motorcycles": 737

}, {
   "year": "2001",
       "cars": 1098,
       "motorcycles": 680,
       "bicycles": 910
}, {
   "year": "2002",
       "cars": 975,
       "motorcycles": 664,
       "bicycles": 670
}, {
   "year": "2003",
       "cars": 1246,
       "motorcycles": 648,
       "bicycles": 930
}, {
   "year": "2004",
       "cars": 1218,
       "motorcycles": 637,
       "bicycles": 1010
}, {
   "year": "2005",
       "cars": 1913,
       "motorcycles": 133,
       "bicycles": 1770
}, {
   "year": "2006",
       "cars": 1299,
       "motorcycles": 621,
       "bicycles": 820
}, {
   "year": "2007",
       "cars": 1110,
       "motorcycles": 10,
       "bicycles": 1050
}, {
   "year": "2008",
       "cars": 765,
       "motorcycles": 232,
       "bicycles": 650
}, {
   "year": "2009",
       "cars": 1145,
       "motorcycles": 219,
       "bicycles": 780
}, {
   "year": "2010",
       "cars": 1163,
       "motorcycles": 201,
       "bicycles": 700
}, {
   "year": "2011",
       "cars": 1780,
       "motorcycles": 85,
       "bicycles": 1470
}, {
   "year": "2012",
       "cars": 1580,
       "motorcycles": 285
}];

var chart =  AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "fontFamily": "Lato",
    "autoMargins": true,
    "addClassNames": true,
    "zoomOutText": "",
    "defs": {
        "filter": [
            {
                "x": "-50%",
                "y": "-50%",
                "width": "200%",
                "height": "200%",
                "id": "blur",
                "feGaussianBlur": {
                    "in": "SourceGraphic",
                    "stdDeviation": "50"
                }
            },
            {
                "id": "shadow",
                "width": "150%",
                "height": "150%",
                "feOffset": {
                    "result": "offOut",
                    "in": "SourceAlpha",
                    "dx": "2",
                    "dy": "2"
                },
                "feGaussianBlur": {
                    "result": "blurOut",
                    "in": "offOut",
                    "stdDeviation": "10"
                },
                "feColorMatrix": {
                    "result": "blurOut",
                    "type": "matrix",
                    "values": "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .2 0"
                },
                "feBlend": {
                    "in": "SourceGraphic",
                    "in2": "blurOut",
                    "mode": "normal"
                }
            }
        ]
    },
    "fontSize": 15,
    "pathToImages": "../amcharts/images/",
    "dataProvider": chartData,
    "dataDateFormat": "YYYY",
    "marginTop": 0,
    "marginRight": 1,
    "marginLeft": 0,
    "autoMarginOffset": 5,
    "categoryField": "year",
    "categoryAxis": {
        "gridAlpha": 0.07,
        "axisColor": "#DADADA",
        "startOnAxis": true,
        "tickLength": 0,
        "parseDates": true,
        "minPeriod": "YYYY"
    },
    "valueAxes": [
        {
            "ignoreAxisWidth":true,
            "stackType": "regular",
            "gridAlpha": 0.07,
            "axisAlpha": 0,
            "inside": true
        }
    ],
    "graphs": [
        {
            "id": "g1",
            "type": "line",
            "title": "Cars",
            "valueField": "cars",
            "fillColors": [
                "#0066e3",
                "#802ea9"
            ],
            "lineAlpha": 0,
            "fillAlphas": 0.8,
            "showBalloon": false
        },
        {
            "id": "g2",
            "type": "line",
            "title": "Motorcycles",
            "valueField": "motorcycles",
            "lineAlpha": 0,
            "fillAlphas": 0.8,
            "lineColor": "#5bb5ea",
            "showBalloon": false
        },
        {
            "id": "g3",
            "title": "Bicycles",
            "valueField": "bicycles",
            "lineAlpha": 0.5,
            "lineColor": "#FFFFFF",
            "bullet": "round",
            "dashLength": 2,
            "bulletBorderAlpha": 1,
            "bulletAlpha": 1,
            "bulletSize": 15,
            "stackable": false,
            "bulletColor": "#5d7ad9",
            "bulletBorderColor": "#FFFFFF",
            "bulletBorderThickness": 3,
            "balloonText": "<div style='margin-bottom:30px;text-shadow: 2px 2px rgba(0, 0, 0, 0.1); font-weight:200;font-size:30px; color:#ffffff'>[[value]]</div>"
        }
    ],
    "chartCursor": {
        "cursorAlpha": 1,
        "zoomable": false,
        "cursorColor": "#FFFFFF",
        "categoryBalloonColor": "#8d83c8",
        "fullWidth": true,
        "categoryBalloonDateFormat": "YYYY",
        "balloonPointerOrientation": "vertical"
    },
    "balloon": {
        "borderAlpha": 0,
        "fillAlpha": 0,
        "shadowAlpha": 0,
        "offsetX": 40,
        "offsetY": -50
    }
});

// we zoom chart in order to have better blur (form side to side)
chart.addListener("dataUpdated", zoomChart);

function zoomChart(){
    chart.zoomToIndexes(1, chartData.length - 2);
}
</script>
</head>
<body>
<div id="chartdiv"></div>    
</body>
</html>

代碼下載:https://www.yiibai.com/downloads/svg/amchart.zip