突出显示 amcharts 中的最高点和最低点

有人可以帮助我更改项目符号或使用 amcharts 突出显示最高和最低值吗？

我正在使用序列图。函数“突出显示”中给出的条件是匹配的，但是项目符号没有突出显示到最高点和最低点。

任何帮助将不胜感激。

请在下面找到我的代码。

<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>

您正在正确设置数据中高/低数据点的大小/类型参数。

但是，您的图表未设置为使用这些字段。

要使图表查找数据中的项目符号类型，请使用其bulletField http://docs.amcharts.com/3/javascriptcharts/AmGraph#bulletField财产。对于子弹尺寸：bulletSizeField http://docs.amcharts.com/3/javascriptcharts/AmGraph#bulletSizeField:

graph.bulletSizeField = "bulletSize";
graph.bulletField = "markerType";

// ...

graph1.bulletSizeField = "bulletSize";
graph1.bulletField = "markerType";