javascript - amchart 点击时更改子弹

Question

我正在尝试更改我点击的项目符号的图像(在 amchart 中) 并且不会产生任何影响。

我正在尝试拥有一个事件列表器，并更改函数中项目的属性。但它对用户界面没有任何影响

有人知道为什么吗？

 $(document).ready(function () {

        Try();

    });

    function Randomize() {

        return Math.floor((Math.random() * 10) + 1);
    }

    function Try() {

        var chart = AmCharts.makeChart("chartdiv", {
            "type": "serial",
            "theme": "none",
            "pathToImages": "http://www.amcharts.com/lib/3/images/",
            "dataProvider":

                buildMe()

            ,

            "balloon": {
                "cornerRadius": 6
            },
            "valueAxes": [{
                "duration": "mm",
                "durationUnits": {
                    "hh": "h ",
                    "mm": "min"
                },
                "axisAlpha": 0
            }],
            "graphs": [{
                "bullet": "square",
                "bulletSize": 14,
                "customBullet": "http://www.amcharts.com/lib/3/images/star.png",
                "bulletBorderAlpha": 1,
                "bulletBorderThickness": 1,
                "fillAlphas": 0.3,
                "fillColorsField": "lineColor",
                "legendValueText": "[[value]]",
                "lineColorField": "lineColor",
                "customBulletField": "customBullet",
                "title": "duration",
                "valueField": "duration"
            }],
            "chartScrollbar": {},
            "chartCursor": {
                "categoryBalloonDateFormat": "YYYY MMM DD",
                "cursorAlpha": 0,
                "zoomable": false
            },
            "dataDateFormat": "YYYY-MM-DD",
            "categoryField": "date",
            "categoryAxis": {
                "dateFormats": [{
                    "period": "DD",
                    "format": "DD"
                }, {
                    "period": "WW",
                    "format": "MMM DD"
                }, {
                    "period": "MM",
                    "format": "MMM"
                }, {
                    "period": "YYYY",
                    "format": "YYYY"
                }],
                "parseDates": true,
                "autoGridCount": false,
                "axisColor": "#555555",
                "gridAlpha": 0,
                "gridCount": 50
            }
        });
         var graph = new AmCharts.AmGraph();
        chart.addListener("clickGraphItem", ChangePan,$(this));

    }


    function ChangePan(event) {
        event.item.dataContext.customBullet = "http://www.amcharts.com/lib/3/images/redstar.png";
        event.item.lineColor = "http://www.amcharts.com/lib/3/images/redstar.png";
         console.log(event.item.dataContext.customBullet);
        console.log(event.item);
    }

    function buildMe() {
        console.log('im in ?')
        var mystring = "";
        var year = 0;
        var month = 0;
        var session = 6;
        var training = 7;

        mystring += "[";
        for (var j = 0; j < training + 1; j++) {

            mystring += '{';


            if (Randomize() < 7) {
                mystring += '"lineColor": "#2498d2",';
            }
            else {
                mystring += '"lineColor": "#1153e6",';
            }
            mystring += ' "date": "2015-07-'+ j +'", "duration": ';

            mystring += Randomize();

           // mystring += ',"customBullet": "http://www.amcharts.com/lib/3/images/redstar.png"';

            if (training == j) {
                mystring += "}";
            }
            else {
                mystring += "},";
            }


        }
        mystring += "]";
        console.log(mystring)
        console.log(JSON.parse(mystring))
        return JSON.parse(mystring);
    }

这是我的jsfiddle .

Answer 1

AmCharts 不会监听 dataContext 更改，因此您必须使用 validateData() 自行执行此操作。 但是，当图表完全重新绘制时，该点将失去悬停状态。 Fiddle