鼠标悬停更改amchart项目符号背景颜色

时间:2018-09-26 10:47:29

标签: javascript css reactjs amcharts

我正在使用带有反应的amchart。 悬停项目符号时,我想将项目符号背景颜色从黑色更改为红色。

有什么方法可以在addListener事件上添加项目符号鼠标?

enter image description here

 const config = {
        "listeners": [
            {
                "event": "changed",
                "method": (e) => {
                    this.changeChart(e)
                }
            }
        ],
        "type": "serial",
        "addClassNames": true,
        "theme": "light",
        "marginRight": 80,
        "marginLeft": 40,
        "autoMarginOffset": 20,
        "mouseWheelZoomEnabled": false,


        "balloon": {
            "adjustBorderColor": true,
            "color": "#000000",
            "cornerRadius": 3,
            "borderColor": "#dddddd",
            "borderThickness": 0,
            "fillColor": "#FFFFFF",
            "drop": true,
            "fillAlpha": 0,
            "horizontalPadding": 0,
            "verticalPadding": 0,
            "pointerOrientation": "down"
        },
        "graphs": [{
            "bullet": "round",
            "bulletSize": 10,
            "customBulletField": "customBullet",
            "bulletBorderAlpha": 1,
            "bulletHitAreaSize" : 0,
            "bulletColor": "#919191",
            "bulletBorderThickness": 1,
            "fillAlphas": 0,
            "fillColorsField": "lineColor",
            "legendValueText": "[[value]]",
            "lineColorField": "lineColor",
            "title": "value",
            "valueField": "value",
            "balloonText": '',
            "balloonFunction": function (item) {
                return makeBalloonHtml(item.dataContext.value, item.dataContext.changeValue);
            }
        }],
        "chartCursor": {
            "categoryBalloonDateFormat": "YYYY MMM DD",
            "cursorAlpha": 0,
            "fullWidth": false,
            "categoryBalloonEnabled": false,

        },
        "categoryField": "date",
        "categoryAxis": {
            "parseDates": true,
            "gridAlpha": 0,

        },
        "valueAxes": [{
            "dashLength": 3,
            "axisAlpha": 0.1,
            "minimum": 0,
            "maximum": this.state.maxValue + (this.state.maxValue / 4.5)
        }],
        "dataProvider": this.state.dataProvider
    };

我正在使用带有反应的amchart。 悬停项目符号时,我想将项目符号背景颜色从黑色更改为红色。

有什么方法可以在addListener事件上添加项目符号鼠标?

1 个答案:

答案 0 :(得分:0)

我知道了。

我们可以使用这种事件方法

{
   "event": "rollOverGraphItem",
   "method": (e) => {
       console.log("rollOverGraphItem");
   }
},
{
   "event": "rollOutGraphItem",
   "method": (e) => {
       console.log("rollOutGraphItem")
   }
}