AmCharts - 显示平均值

时间:2016-12-02 11:23:21

标签: javascript charts average amcharts

我在AmCharts中有一张图表,我想让它显示一条线 代表平均值。

Something like this

有可能吗?

1 个答案:

答案 0 :(得分:0)

我尝试使用amcharts js,它看起来像是可能的(becoz这是我的第一个amcharts小提琴),检查这个小提琴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"
        } ]
    }
} );