Question

FusionCharts-我尝试创建一个column2d图表。我有一个要求，我需要点击图表的其中一个栏并刷新下表中的一些数据。除此之外，我需要更改我点击的栏的颜色。我能够使用link属性设置为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

background-color不是属性，试试这个：

 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) { }

FusionCharts-在Column2D图表中点击更改栏的颜色

1 个答案: