amcharts line to be changed with different color if it goes down to the other line(after intersecting)

问题

I am using amcharts, where in there are two line getting drawn. In case if the first line goes down to the second line, I need to make that part of line - bold with red color.

AmCharts.makeChart("chartdiv", {
                    "backgroundColor": 'blue',
                    "theme": "light",
                    "type": "serial",
                    "zoomOutText": '',
                    "color": "black",
                    "dataDateFormat": "HH:NN",
                    "legend": {
                "useGraphSettings": true
            },
                    "dataProvider": chartData,
                    "valueAxes": [{
                            "id": "v1",
                            "position": "left",
                            "axisColor": "#472F52",
                            "title": "Time of the Day",
                            "type": "date",
                            "axisThickness": 2,
                            "markPeriodChange": false,
                            "autoGridCount": false,
                            "minimumDate": "00:00",
                            "maximumDate": "23:00",                                
                            "gridCount": 20,
                            "minPeriod": "ss",                              
                        }

                    ],
                    "startDuration": 1,
                    "graphs": [{
                            "lineAlpha": 0.9,
                            "type": "line",
                            "lineThickness": 1.5,
                            "bullet": "round",
                            "lineColor": "#0D338C",
                            "bulletBorderColor": "#0D338C",
                            "bulletBorderThickness": 0.2,
                            "bulletBorderAlpha": 0.5,
                            "valueField": "expectedEndTime",
                            "title": "Expected End Time",           
                            "dateFormat": "HH:NN",
                            "labelPosition": "top",
                            "labelColor": "red",
                            "valueAxis": "v1",
                            "labelText": "[[labelExpected]]",
                            "balloonText": "Estimated End Time : <b>[[value]]</b>"
                        },
                        {
                            "lineAlpha": 0.9,
                            "type": "line",
                            "lineThickness": 1.5,
                            "lineColor": "#C63F05",
                            "bullet": "round",
                            "bulletBorderColor": "#C63F05",
                            "bulletBorderThickness": 0.2,
                            "bulletBorderAlpha": 0.5,
                            "valueField": "actualEndTime",
                            "title": "Actual End Time",
                            "dateFormat": "HH:NN",
                            "labelPosition": "bottom",
                            "labelColor": "blue",
                            "valueAxis": "v1",
                            "labelText": "[[labelActual]]",
                            "balloonText": "Actual End Time : <b>[[value]]</b>"
                        }
                    ],
                    "chartCursor": {
                        "categoryBalloonDateFormat": "DD",
                        "cursorAlpha": 0.1,
                        "cursorColor": "#000000",
                        "fullWidth": true,
                        "valueBalloonsEnabled": true,
                        "zoomable": false
                    },
                    "categoryField": "batchName",
                    "categoryAxis": {
                        "gridPosition": "start",
                        "axisThickness": 2,                         
                        "axisColor": "#472F52",
                        "autoGridCount": false,
                        "gridCount": 1000,
                        "title": "Batches",
                        "labelRotation": 30
                    },
                    "export": {
                        "enabled": true,
                        "borderRadius": "10px",
                        "text-align": "center",
                        "pdfMake": {
                            "content": ["'<Name of the Metric to be displayed dynamically>'",
                                "                     ", "from <startDate> To <endDate>", {
                                    "image": "reference", //exported image
                                    "fit": [523.28, 769.89]
                                }
                            ]
                        },
                        "legend": {
                            "position": "bottom", // or "right", "bottom" and "left" are possible
                            "width": 200, // optional
                            "height": 200 // optional
                        }
                    }
                });

there are two line getting drawn. In case if the first line goes down to the second line, I need to make that part of line - bold with red color.

Here is My JsFiddle

Any suggestions is deeply appreciated!

回答1:

By adding fillAlphas on 2 graphs, it will fill the area between the graph and the top of the chart with lighter color.

graphs: [
    {
        ...,
        fillAlphas: .5
    },
    {
        ...,
        fillAlphas: .5
    }
]

The area with 2 colors overlapped are unnecessary but I don't know if there is a way to get rid of it easily. The lighter blue areas are the ones when the first line goes under the second line.

Would this be good enough?

fiddle: https://jsfiddle.net/davidliang2008/mze52096/

来源：https://stackoverflow.com/questions/52934161/amcharts-line-to-be-changed-with-different-color-if-it-goes-down-to-the-other-li