FusionCharts - изменение цвета столбца при нажатии на диаграмме Column2D

FusionCharts — я попытался создать диаграмму column2d. У меня есть требование, когда мне нужно щелкнуть одну из полос диаграммы и обновить некоторые данные в таблице ниже. Кроме того, мне нужно изменить цвет полосы, на которую я нажал. Я могу выполнить первый, используя свойство ссылки, чтобы установить функцию javascript и обновить таблицу в этой функции. А вот второе требование (изменение цвета) выполнить не могу. Я попытался получить элемент HTML с помощью DOM и изменить цвет. Но я не могу получить элемент, а неотъемлемый объект, созданный Рафаэлем (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

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