我需要突出显示两个＆＃39; YAxis＆＃39;的最小值和最大值。安息点。 我正在使用＆＃34; addListener＆＃34;突出显示Y1和Y2。问题是在Y2Min和Y2Max之间添加了额外的箭头（请检查屏幕截图）并且Y2Min指向下方而不是向上。
但是当我评论highlightY1的addListener时，highlightY2工作正常，反之亦然。有人可以帮我修复代码吗？任何帮助表示赞赏
var chart;
var chartData = [
{"date": "2006", "value": 67, "value1": 83},
{"date": "2007", "value": 70, "value1": 90},
{"date": "2008", "value": 66, "value1": 56},
{"date": "2009", "value": 65, "value1": 50},
{"date": "2010", "value": 55, "value1": 90},
{"date": "2011", "value": 60, "value1": 89},
{"date": "2012", "value": 60, "value1": 52},
{"date": "2013", "value": 61, "value1": 63},
{"date": "2014", "value": 65, "value1": 74},
{"date": "2015", "value": 64, "value1": 53},
{"date": "2016", "value": 66, "value1": 61},
{"date": "2017", "value": 60, "value1": 76},
{"date": "2018", "value": 62, "value1": 65},
{"date": "2019", "value": 61, "value1": 51},
];
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", highlightY1);
chart.addListener("rendered", highlightY2);
// 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.bulletSizeField = "30";
// graph.bulletField = "value";
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.bulletSizeField = "30";
// graph1.bulletField = "bullet";
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 highlightY1(event) {
// get chart and value axis
var chart = event.chart;
// var axis = chart.valueAxes[0];
var graph = chart.graphs[0];
graph.bulletSizeField = "bulletSize";
graph.bulletField = "markerType";
if (chart.minMaxMarked)
return;
var connectsValue = new Array();
for (var i = 0; i < chart.dataProvider.length; i++) {
connectsValue[i] = chart.dataProvider[i][graph.valueField];
}
connectsValue.sort();
// find data points with highest and biggest values
connectsMax = parseInt(connectsValue[connectsValue.length - 1]);
connectsMin = parseInt(connectsValue[0]);
for (var i = 0; i < chart.dataProvider.length; i++) {
var dp = chart.dataProvider[i];
if (dp[graph.valueField] == connectsMax) {
console.log(dp[graph.valueField] + "<=>" + connectsMax);
dp.markerType = "triangleUp";
dp.bulletSize = 18;
}
if (dp[graph.valueField] == connectsMin) {
// alert('test');
console.log(dp[graph.valueField] + "<=>" + connectsMin);
dp.markerType = "triangleDown";
dp.bulletSize = 18;
}
}
// set flag that we're done already
//chart.minMaxMarked = true;
// take in updated data
// chart.validateData();
}
function highlightY2(event) {
// get chart and value axis
var chart = event.chart;
// var axis = chart.valueAxes[0];
var graph1 = chart.graphs[1];
graph1.bulletSizeField = "bulletSize";
graph1.bulletField = "markerType";
if (chart.minMaxMarked)
return;
var disconnectsValue = new Array();
for (var i = 0; i < chart.dataProvider.length; i++) {
disconnectsValue[i] = chart.dataProvider[i][graph1.valueField];
}
disconnectsValue.sort();
// find data points with highest and biggest values
disconnectsMax = parseInt(disconnectsValue[disconnectsValue.length - 1]);
disconnectsMin = parseInt(disconnectsValue[0]);
for (var i = 0; i < chart.dataProvider.length; i++) {
var dp = chart.dataProvider[i];
if (dp[graph1.valueField] == disconnectsMax) {
console.log(dp[graph1.valueField] + "<=>" + disconnectsMax);
dp.markerType = "triangleUp";
dp.bulletSize = 18;
}
if (dp[graph1.valueField] == disconnectsMin) {
// alert('test');
console.log(dp[graph1.valueField] + "<=>" + disconnectsMin);
dp.markerType = "triangleDown";
dp.bulletSize = 18;
}
}
// set flag that we're done already
chart.minMaxMarked = true;
// take in updated data
chart.validateData();
}html, body {
width: 100%;
height: 100%;
margin: 0px;
}
#chartdiv {
width: 100%;
height: 100%;
}<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>