FusionCharts - 在 Column2D 图表中单击时更改条形的颜色

Question

FusionCharts- 我尝试创建一个 column2d 图表。我有一个要求，我需要单击图表的一个条形图并刷新下表中的一些数据。除此之外，我需要更改我单击的栏的颜色。我能够完成第一个使用链接属性设置为javascript函数并刷新该函数中的表。但是第二个要求（改变颜色）我无法完成。我尝试使用 DOM 获取 HTML 元素并更改颜色。但是，我无法获取元素，而是 Raphael 创建的固有对象（fusionchart 使用 raphael）。我还尝试使用对象的 raphaelID 属性访问元素，但这没有用。我希望在客户端完成此操作，无需任何刷新。我还尝试使用单击事件作为 FisionChart 数据源的一部分。

var barChart = new FusionCharts({
    type: 'column2d',
    id: chartid,
    width: w,
    height: '200',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "bgalpha": "0",
            "Bold": "0",
            "canvasbgalpha": "0",
            "canvasborderalpha": "0",
            "defaultnumberscale": "calls",
            "divlinealpha": "10",
            "formatnumberscale": "1",
            "labelDisplay": "Wrap",
            "numDivLines": "3", //changed for showing Y-axis scale
            "numVDivLines": "0", //changed for showing Y-axis scale
            "outCnvBaseFont": "Tahoma",
            "outCnvbaseFontSize": "12",
            "palettecolors": "#3399FF",
            "plotbordercolor": "#797979",
            "plotBorderHoverThickness": "1",
            "plotFillHoverColor": "#FFFFFF",
            "plotgradientcolor": "",
            "plotHoverEffect": "1",
            "plotSpacePercent": "35",
            "rotateYAxisName": "0",
            "showalternatehgridcolor": "0",
            "showborder": "0",
            "showplotborder": "1",
            "showvalues": "0",
            "showYAxisValues": "1", //changed for showing Y-axis scale.
            "xaxisname": currentMonth,
            "yaxisname": "Number {br} of calls",
            "yAxisMinvalue": "0",
            "yAxisMaxValue": max //changed for showing Y-axis scale
        },
        "data": chartDataItems,
        "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", "#FFFFFF");
                //                        }
                plotItems[argObj.dataIndex].graphic.attr("fill", "#FFFFFF");
            }
        }
    }
});
barChart.render(chartToRenderId);

下面是我使用 HTML 属性访问元素的代码。

 try {
        var day = parseInt(selectedDate.substring(0, 2));
        var rectangleBars = $(".red-hot-2").find("rect");
        var rectangle = rectangleBars[day - 1];
        var element = document.getElementById(rectangle.raphaelid);
        element.click(function () {
            this.attr('background-color', 'white');
        });
    }
    catch (e) { }

Answer 1

背景色不是属性，试试这个：

 try {
        var day = parseInt(selectedDate.substring(0, 2));
        var rectangleBars = $(".red-hot-2").find("rect");
        var rectangle = rectangleBars[day - 1];
        var element = document.getElementById(rectangle.raphaelid);
        element.click(function () {
            $(this).css("background-color", "white");
        });
    }
    catch (e) { }