融合图表 - 3.1.1我们是否可以突出显示第2d栏图中的特定栏

时间:2014-01-22 09:09:37

标签: fusioncharts

我正在使用Fusion Chart version 3.1.1并使用IOS中的第2d列图表,该图表工作正常。

我也在使用链接事件,如下所示

<set label="1" value="14000" color="bbdaf3" link="JavaScript:myJS1('+Salary+')"/>\n\ 

因此,每当我点击此特定栏myJS1 function时,都会调用并按预期提供结果。

当我点击特定栏时,它会显示其关联值14000对其中的默认图表(Hover)功能。当我点击突出显示时,我可以更改特定的条形颜色。

1 个答案:

答案 0 :(得分:0)

可以在点击时更改特定条的颜色(使用最新版本的FusionCharts)。您必须修改基础raphael对象。在这个小提琴中可以找到一个例子。 http://jsfiddle.net/subramaniashiva/KmTZ9/6/如果这有帮助,请告诉我。

FusionCharts.ready(function () {
    var revenueChart = new FusionCharts({
        type: 'column2d',
        renderAt: 'chart-container',
        id: 'myChart',
        width: '500',
        height: '300',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Quarterly Revenue ",
                    "xAxisName": "Quarter",
                    "yAxisName": "Amount (In USD)",
                    "numberPrefix": "$",
                    "valueHoverAlpha": "100",
                    "plotHoverEffect": "0",
                    "theme": "fint"
            },
                "data": [{
                "label": "Q1",
                    "value": "1950000"
            }, {
                "label": "Q2",
                    "value": "1450000"
            }, {
                "label": "Q3",
                    "value": "1730000"
            }, {
                "label": "Q4",
                    "value": "2120000"
            }]
        },
        events: {
            "dataPlotClick": function (evtObj, argObj) {
                // Modifying the underlying Raphael object
                var i, plotItems = evtObj.sender.jsVars.hcObj.elements.plots[0].items,
                    plotLength = plotItems.length;
                for (i = 0; i < plotLength; i++) {
                    plotItems[i].graphic.attr("fill-opacity", 0.2);
                }
                plotItems[argObj.dataIndex].graphic.attr("fill-opacity", 1);
            }
        }
    }).render();
});