FusionCharts - промяна на цвета на лента при щракване в Column2D диаграма

FusionCharts - Опитах се да създам диаграма column2d. Имам изискване, при което трябва да щракна върху една от лентите на диаграмата и да опресня някои данни в таблица по-долу. Освен това, трябва да променя цвета на лентата, върху която съм щракнал. Мога да изпълня първото, като използвам свойството за връзка, за да задам функция на javascript и да опресня таблицата в тази функция. Но второто изискване (промяна на цвета) не мога да изпълня. Опитах се да извлека HTML елемента с помощта на DOM и да променя цвета. Но не мога да извлека елемента, а присъщия обект, създаден от 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) { }

javascript jquery fusioncharts
person Saurabh Singh    schedule 03.02.2015    source източник

Отговори (1)


arrow_upward
1
arrow_downward

фоновият цвят не е атрибут, опитайте това:

 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) { }
person Caio Kawasaki    schedule 03.02.2015