Ambarlardaki en yüksek ve en düşük noktayı vurgulama

Question

Birisi mermiyi değiştirmeme veya amcharts kullanarak en yüksek ve en düşük değerleri vurgulama konusunda bana yardımcı olabilir mi?

Seri grafik kullanıyorum. "Vurgulama" fonksiyonunda verilen koşul eşleşiyor, ancak mermiler en yüksek ve en düşük noktalara kadar vurgulanmamıştır.

Herhangi bir yardım takdir edilecektir.

Lütfen aşağıdaki kodu takip edin.

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

Answer 1

Verilerdeki yüksek/düşük veri noktaları için boyut/tür parametrelerini doğru şekilde ayarlıyorsunuz. Ancak, grafikleriniz bu alanları kullanacak şekilde ayarlanmamıştır.

Grafikte madde türü için veri araması yapmak için, bulletField özelliğini kullanın. bulletSizeField: mermi boyutu için

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

// ... 

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

Answer 2

Çözüm yayınlanmıştır martynasm !!! Teşekkürler.

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 { 
 
\t width: 100%; 
 
\t 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>