有人可以帮助我更改项目符号或使用amcharts突出显示最高和最低值吗？
我正在使用序列图。函数中给出的条件＆＃34;突出显示＆＃34;匹配，但子弹没有突出显示最高点和最低点..
任何帮助将不胜感激。
请在下面找到我的代码。
<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>
答案 0 :(得分：1)
您正在为数据中的高/低数据点正确设置大小/类型参数。
但是，您的图表未设置为使用这些字段。
要使图表在数据中查找项目符号类型，请使用其bulletField属性。对于子弹大小：bulletSizeField：
graph.bulletSizeField = "bulletSize";
graph.bulletField = "markerType";
// ...
graph1.bulletSizeField = "bulletSize";
graph1.bulletField = "markerType";
答案 1 :(得分：0)
解决方案发布了martynasm !!!感谢。
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 = "bulletSize1";
graph.bulletField = "markerType1";
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.markerType1 = "triangleUp";
dp.bulletSize1 = 18;
}
if (dp[graph.valueField] == connectsMin) {
// alert('test');
console.log(dp[graph.valueField] + "<=>" + connectsMin);
dp.markerType1 = "triangleDown";
dp.bulletSize1 = 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 = "bulletSize2";
graph1.bulletField = "markerType2";
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.markerType2 = "triangleUp";
dp.bulletSize2 = 18;
}
if (dp[graph1.valueField] == disconnectsMin) {
// alert('test');
console.log(dp[graph1.valueField] + "<=>" + disconnectsMin);
dp.markerType2 = "triangleDown";
dp.bulletSize2 = 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>