如何改变StockEvent气球边框的颜色[AmCharts v3]

时间:2017-05-02 06:26:45

标签: javascript amcharts

是否可以更改StockEvent气球(提示)边框的颜色?它一直都是红色的。我找不到合适的选择。请参阅我当前的解决方案http://jsfiddle.net/a04j0hqv/4/ 当然有可能改变价值提示的AmBalloon边界,但似乎无法将其改为StockEvent。

var amChartsData = [{"date":"2017-03-01","value":"126.510000"},{"date":"2017-03-02","value":"126.420000"},{"date":"2017-03-03","value":"126.480000"},{"date":"2017-03-06","value":"126.400000"},{"date":"2017-03-07","value":"126.650000"},{"date":"2017-03-08","value":"126.370000"},{"date":"2017-03-09","value":"126.480000"},{"date":"2017-03-10","value":"120.720000"},{"date":"2017-03-13","value":"121.420000"},{"date":"2017-03-14","value":"121.420000"},{"date":"2017-03-15","value":"121.700000"},{"date":"2017-03-16","value":"122.410000"},{"date":"2017-03-17","value":"122.530000"},{"date":"2017-03-20","value":"122.260000"},{"date":"2017-03-21","value":"121.540000"},{"date":"2017-03-22","value":"121.250000"},{"date":"2017-03-23","value":"121.690000"},{"date":"2017-03-24","value":"121.950000"},{"date":"2017-03-27","value":"121.390000"},{"date":"2017-03-28","value":"122.330000"},{"date":"2017-03-29","value":"122.840000"},{"date":"2017-03-30","value":"122.670000"},{"date":"2017-03-31","value":"122.840000"},{"date":"2017-04-03","value":"122.760000"},{"date":"2017-04-04","value":"123.070000"},{"date":"2017-04-05","value":"123.930000"},{"date":"2017-04-06","value":"124.130000"},{"date":"2017-04-07","value":"124.580000"},{"date":"2017-04-10","value":"124.310000"},{"date":"2017-04-11","value":"123.870000"},{"date":"2017-04-12","value":"123.530000"},{"date":"2017-04-13","value":"123.470000"},{"date":"2017-04-14","value":"123.470000"},{"date":"2017-04-18","value":"123.000000"},{"date":"2017-04-19","value":"122.660000"},{"date":"2017-04-20","value":"122.940000"},{"date":"2017-04-21","value":"122.610000"},{"date":"2017-04-24","value":"124.010000"},{"date":"2017-04-25","value":"124.280000"},{"date":"2017-04-26","value":"124.460000"}];

function parseDate(dateString) {
     var dateArray = dateString.split("-");
     if(dateArray.lenght < 2) { alert(dateString); }
     var date = new Date(Number(dateArray[0]), Number(dateArray[1]) - 1, Number(dateArray[2]), 0, 0, 0);
     return date;
}

for (var j in amChartsData) {
    amChartsData[j].date = parseDate(amChartsData[j].date);
}

var chart = AmCharts.makeChart( "chartdiv", {
    "type": "stock",
    "theme": "light",
    "dataSets": [ {
        "color": "#006EBE",
        "fieldMappings": [ {
            "fromField": "value",
            "toField": "value"
        } ],
        "dataProvider": amChartsData,
        "categoryField": "date",
        // EVENTS
        "stockEvents": [{
            "date": new Date( 2017, 3, 6 ),
            "type": "sign",
            "rollOverColor": "#EF9463",
            "borderColor": "#EF9463",
            "backgroundColor": "#ffffff",
            "graph": "g1",
            "description": "Lorem Ipsum ...",
        }]
    } ],

    "panels": [ {
        "title": "Value",
        "stockGraphs": [ {
            "id": "g1",
            "valueField": "value"
        } ]
    } ],

    "chartScrollbarSettings": {
        "graph": "g1"
    },

    "chartCursorSettings": {
        "pan": true,
        "cursorColor": "#006EBE",
        "valueBalloonsEnabled": true,
        "valueLineAlpha": 0.5,
    },

    "balloon": {
        "shadowAlpha": 0,
        "borderThickness": 1,
        "adjustBorderColor": true,
        "cornerRadius": 5,
        "fillColor": "#FFFFFF"
    },

    "periodSelector": {
        "periods": [ {
            "period": "DD",
            "count": 10,
            "date": "10 days"
        }, {
            "period": "MM",
            "count": 1,
            "date": "1 month"
        }, {
            "period": "YYYY",
            "count": 1,
            "date": "1 year"
        }, {
            "period": "YTD",
            "date": "YTD"
        }, {
            "period": "MAX",
            "date": "MAX"
        } ]
    },

    "panelsSettings": {
        "usePrefixes": true
    }
} );

1 个答案:

答案 0 :(得分:1)

您可以通过设置balloonColor property in stockEventsSettings

来更改所有股票事件的气球颜色
regexp_replace(your_string ,'^[^- ]+ ?- ?', null, 1, 1)

很遗憾,您无法为每个不同的事件单独设置边框。

这是一个updated fiddle,气球设置为绿色。