Highlighting den höchsten und niedrigsten Punkt in Amcharts

Kann mir jemand beim Ändern des Aufzählungszeichens oder beim Hervorheben der höchsten und niedrigsten Werte mithilfe von Amcharts helfen?

Ich verwende ein serielles Diagramm. Die in der Funktion "Hervorheben" angegebene Bedingung stimmt überein, jedoch werden die Aufzählungszeichen nicht zum höchsten und niedrigsten Punkt hervorgehoben.

Jede Hilfe wird geschätzt.

Bitte finden Sie meinen Code unten.

<link rel="stylesheet" href="style.css" type="text/css">
        <script src="amcharts/amcharts.js" type="text/javascript"></script>
        <script src="amcharts/serial.js" type="text/javascript"></script>

<script>
            var chart;

            var chartData = [
{"date": "2006", "value": 63, "value1": 87},
{"date": "2007", "value": 64, "value1": 63},
{"date": "2008", "value": 66, "value1": 75},
{"date": "2009", "value": 70, "value1": 51},
{"date": "2010", "value": 63, "value1": 79},
{"date": "2011", "value": 64, "value1": 65},
{"date": "2012", "value": 56, "value1": 52},
{"date": "2013", "value": 60, "value1": 88},
{"date": "2014", "value": 56, "value1": 90},
{"date": "2015", "value": 68, "value1": 83},
{"date": "2016", "value": 68, "value1": 63},
{"date": "2017", "value": 69, "value1": 74},
{"date": "2018", "value": 70, "value1": 68},
{"date": "2019", "value": 55, "value1": 65},            ];


            AmCharts.ready(function () {
                // SERIAL CHART
                chart = new AmCharts.AmSerialChart();

                chart.dataProvider = chartData;
                chart.dataDateFormat = "YYYY";
                chart.categoryField = "date";
                chart.addTitle("Graph Chart-Connects/ Disconnects");
                chart.addListener("rendered", highlight);


                // AXES
                // category
                var categoryAxis = chart.categoryAxis;
                categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
                categoryAxis.minPeriod = "YYYY"; // our data is daily, so we set minPeriod to DD
                categoryAxis.gridAlpha = 0.1;
                categoryAxis.minorGridAlpha = 0.1;
                categoryAxis.axisAlpha = 0;
                categoryAxis.minorGridEnabled = true;
                categoryAxis.inside = true;

                // value
                var valueAxis = new AmCharts.ValueAxis();
                valueAxis.tickLength = 0;
                valueAxis.axisAlpha = 0;
                valueAxis.showFirstLabel = false;
                valueAxis.showLastLabel = false;
                chart.addValueAxis(valueAxis);

                // GRAPH
                var graph = new AmCharts.AmGraph();
                graph.title = "Connects";
                graph.dashLength = 3;
                graph.lineColor = "#00CC00";
                graph.valueField = "value";
                graph.bullet = "round";
                graph.balloonText = "[[category]]<br><b><span style='font-size:14px;'>Connects:[[value]]</span></b>";
                chart.addGraph(graph);


                // GRAPH
                var graph1 = new AmCharts.AmGraph();
                graph1.title = "Disconnects";
                graph1.dashLength = 3;
                graph1.lineColor = "#EF9B0F";
                graph1.valueField = "value1";
                graph1.bullet = "square";
                graph1.balloonText = "[[category]]<br><b><span style='font-size:14px;'>Disconnects:[[value1]]</span></b>";
                graph1.fillToGraph = graph;
                chart.addGraph(graph1);

                // CURSOR
                var chartCursor = new AmCharts.ChartCursor();
                chartCursor.valueLineEnabled = true;
                chartCursor.valueLineBalloonEnabled = true;
                chart.addChartCursor(chartCursor);

                // SCROLLBAR
                var chartScrollbar = new AmCharts.ChartScrollbar();
                chart.addChartScrollbar(chartScrollbar);

                // HORIZONTAL GREEN RANGE
                var guide = new AmCharts.Guide();
                guide.value = 10;
                guide.toValue = 20;
                guide.fillColor = "#00CC00";
                guide.inside = true;
                guide.fillAlpha = 0.2;
                guide.lineAlpha = 0;
                valueAxis.addGuide(guide);


                var legend = new AmCharts.AmLegend();
                legend.marginLeft = 110;
                //    legend.data = [{markerType:"round",title:"Connects",color:"#EF9B0F"}, {markerType:"square",title:"Disconnects",color:"#00CC00"}]
                chart.addLegend(legend);
                // WRITE
                chart.write("chartdiv");




            });


            function highlight(event) {



                // get chart and value axis
                var chart = event.chart;
                var axis = chart.valueAxes[0];
                var graph = chart.graphs[1];

                if (chart.minMaxMarked)
                    return;




                // find data points with highest and biggest values
                for (var i = 0; i < chart.dataProvider.length; i++) {
                    var dp = chart.dataProvider[i];
                    console.log(dp[graph.valueField] + "<=>" + axis.maxReal);
                    //alert(axis.minReal);
                    if (dp[graph.valueField] == axis.maxReal) {
                           alert('test');
                        dp.markerType = "bubble";
                        dp.bulletSize = 8;
                        //dp.
                    }
                    else if (dp[graph.valueField] == axis.minReal) {
                       // alert('test');
                        dp.markerType = "bubble";
                        dp.bulletSize = 8;
                    }
                }

                // set flag that we're done already
                chart.minMaxMarked = true;

                // take in updated data
                chart.validateData();
            }


        </script>

Antworten auf die Frage(4)

Ihre Antwort auf die Frage