AmCharts - 平均値を表示

Question

私はAmChartsでグラフを取得しました。平均値を表す という行を表示します。

Something like this

それは可能ですか？

Answer 1

私はfiddle link

var chartData = weekendGuides = []; 
generateChartData(); 
//I given some static average value you can make it dynamic 
var average_value; 

function generateChartData() { 
var average_a1 =0; 

var graph_length = 200; 
    var firstDate = new Date(); 
    firstDate.setDate(firstDate.getDate() - 200); 
    firstDate.setHours(0, 0, 0, 0); 
    for (var i = 0; i < graph_length; i++) { 
     var newDate = new Date(firstDate); 
     newDate.setDate(newDate.getDate() + i); 
     var a1 = Math.round(Math.random() * (40 + i)) + 100 + i; 
     var b1 = Math.round(Math.random() * (1000 + i)) + 500 + i * 2; 

     average_a1 = parseInt(average_a1) + parseInt(a1); 

     chartData.push({ 
      "date": newDate, 
      "value": a1   
     }); 

     // add weekend guide 
     if (6 == newDate.getDay()) { 
      var toDate = new Date(newDate); 
      toDate.setDate(newDate.getDate() + 2); 
      weekendGuides.push({ 
       "date": newDate, 
       "toDate": toDate, 
       "lineAlpha": 0, 
       "fillAlpha": 0.05, 
       "fillColor": "#000", 
       "expand": true 
      }); 
     } 
    } 
    average_value = average_a1/graph_length; 
    console.log(average_value); 
} 

var chart = AmCharts.makeChart("chartdiv", { 
    "type": "stock", 
    "dataSets": [ { 
     "title": "first data set", 
     "fieldMappings": [ { 
      "fromField": "value", 
      "toField": "value" 
     }, { 
      "fromField": "volume", 
      "toField": "volume" 
     } ], 
     "dataProvider": chartData, 
     "categoryField": "date" 
    } ], 
    "panels": [ { 
     "showCategoryAxis": false, 
     "title": "Value", 
     "percentHeight": 70, 
     "stockGraphs": [ { 
      "id": "g1", 
      "valueField": "value", 
      "comparable": true, 
      "compareField": "value", 
      "balloonText": "[[title]]:<b>[[value]]</b>", 
      "compareGraphBalloonText": "[[title]]:<b>[[value]]</b>" 
     } ], 
     "stockLegend": { 
      "periodValueTextComparing": "[[percents.value.close]]%", 
      "periodValueTextRegular": "[[value.close]]" 
     }, 
     "categoryAxis": { 
      "guides": weekendGuides 
     }, 
     "valueAxes": [ { 
      "guides": [ { 
       "value":average_value, 
       "lineAlpha": 100, 
       "lineColor": "#c00", 
       "label": "Guide #1", 
       "position": "right" 
      } ] 
     } ] 
    } ], 
    "chartScrollbarSettings": { 
     "graph": "g1" 
    }, 
    "chartCursorSettings": { 
     "valueBalloonsEnabled": true, 
     "fullWidth": true, 
     "cursorAlpha": 0.1 
    }, 
    "periodSelector": { 
     "position": "bottom", 
     "periods": [ { 
      "period": "MM", 
      "selected": true, 
      "count": 1, 
      "label": "1 month" 
     }, { 
      "period": "YYYY", 
      "count": 1, 
      "label": "1 year" 
     }, { 
      "period": "YTD", 
      "label": "YTD" 
     }, { 
      "period": "MAX", 
      "label": "MAX" 
     } ] 
    } 
});