Question

目前，我有一个图表，它是条形图和折线图的组合，我想在折线图上显示阴影有没有办法在背景上显示阴影以下是创建折线图

的示例代码

                objGraph.fillAlphas = 0;
                objGraph.lineAlpha = 0.7;
                objGraph.type = "line";
                objGraph.title = "îàæï";
                objGraph.lineThickness = 4;
                //objGraph.lineColor = "#" + 
                objChartData.lstSerieses[j].Color;
                objGraph.lineColor = "#fff";
                //objGraph.customBullet = "images/star.png"; // bullet for all data points
                objGraph.bullet = "round";
                objGraph.bulletSize = 11;
                objGraph.bulletColor = "#fff";
                objGraph.bulletBorderColor = "#000";
                objGraph.bulletBorderThickness = 2;
                objGraph.bulletBorderAlpha = 1;
                //objGraph.bulletSize = 14; // bullet image should be a 
               rectangle (width = height)
                objGraph.customBulletField = "bullet"; // this will make the graph to display custom bullet (red star)
                objGraph.bulletSizeField = "bulletSize";
                objGraphdescriptionField = "description";

Answer 1

我得到的解决方案是在折线图中为线条制作阴影。首先，您必须创建一个用于创建阴影的JSON对象，如

     var defs = {
        "filter" : {
            "id": "dropshadow",  // id for the line shadow
            "x": "-10%",   // position from x axis
            "y": "-10%",   // position from y axis
            "width": "120%", // width of shadow
            "height": "120%",  //height of shadow
            "feOffset": {
              "result": "offOut",
              "in": "SourceAlpha",
              "dx": "0",  //position from adjecent line along x axis
              "dy": "12"  //position from adjecent line along y axis
            },
            "feGaussianBlur": {
              "result": "blurOut",
              "in": "offOut",
              "stdDeviation": "5"
            },
            "feBlend": {
              "in": "SourceGraphic",
              "in2": "blurOut",
              "mode": "normal"
            }
        }
    };

然后，您只需要在绑定图表数据时将该JSON对象添加到图表中，如

chart.defs = defs;  //def object
var chart = AmCharts.makeChart("amchartdiv", chart, theme);

Answer 2

<filter id="shadow">
    <feDropShadow dx="1" dy="5" stdDeviation="2"/>
</filter>

使用给定的过滤器创建一个函数，并使用过滤器ID #shadow将其传递给行。

在amchart中使用折线图显示背景阴影线条

2 个答案: