javascript - 向每个堆叠条形图项目添加链接

Question

我有一个堆积条形图，我试图使图表中单击的每个项目根据单击的内容打开共享点 View 。

我正在此处构建数据

seriesData.push({ name: xStatus[i], data: dataArray, url: countArray[i].url });

我的图表代码如下所示:

loadStackedBarChartWithLink = function (xCategories, seriesData, divId, chartTitle, yAxisTitle) {
    //Build Stacked Bar Chart
    $(divId).highcharts({
        chart: {
            type: 'bar'
        },
        credits: {
            enabled: false
        },
        title: {
            text: chartTitle
        },
        xAxis: {
            categories: xCategories,
            allowDecimals: false
        },
        yAxis: {
            min: 0,
            allowDecimals: false,
            title: {
                text: yAxisTitle
            }
        },
        legend: {
            backgroundColor: '#FFFFFF',
            reversed: true
        },
        plotOptions: {
            series: {
                cursor: 'pointer',
                stacking: 'normal',
                point: {
                    events: {
                        click: function () {
                            location.href = this.options.url;
                        }
                    }
                }
            }
        },
        series: seriesData            
    });
}

图表具有正确的数据，指针是正确的，但我的网址为“未定义”。

非常感谢任何帮助。

IWSChartBuilder.PersonEngagementsByStatusChart = function () {
var load = function () {
    $.when(            
        IWSChartBuilder.RESTQuery.execute(GET THE DATA HERE)
    ).done(
        function (engagements1) {
            var data = [];
            var countArray = [];
            var urls = [];

            var results = engagements1.d.results;                
            for (var i = 0; i < results.length; i++) {
                if (results[i].Consultant.Title == undefined) {
                    continue;
                }
                var found = false;
                for (var j = 0; j < data.length; j++) {
                    if (data[j].personName == results[i].Consultant.Title && data[j].statusName == results[i].Engagement_x0020_Status) {
                        data[j].statusCount = data[j].statusCount + 1;
                        found = true;
                    }
                }
                if (!found) {                        
                    data.push(new IWSChartBuilder.StatusByPerson(results[i].Consultant.Title, results[i].Engagement_x0020_Status, 1));

                }
            }

            //Put data into format for stacked bar chart
            var seriesData = [];
            var xCategories = [];
            var xStatus = [];
            var i, j, cat, stat;

            //Get Categories (Person Name)
            for (i = 0; i < data.length; i++) {
                cat = data[i].personName;
                if (xCategories.indexOf(cat) === -1) {
                    xCategories[xCategories.length] = cat;
                }
            }
            //Get Status values
            for (i = 0; i < data.length; i++) {
                stat = data[i].statusName;
                if (xStatus.indexOf(stat) === -1) {
                    xStatus[xStatus.length] = stat;
                }
            }

            //Create initial series data with 0 values
            for (i = 0; i < xStatus.length; i++) {
                var dataArray = [];
                for (j = 0; j < xCategories.length; j++) {
                    dataArray.push(0);
                }
                seriesData.push({ name: xStatus[i], data: dataArray });
          }

            //Cycle through data to assign counts to the proper location in the series data
            for (i = 0; i < data.length; i++) {
                var personIndex = xCategories.indexOf(data[i].personName);
                for (j = 0; j < seriesData.length; j++) {
                    if(seriesData[j].name == data[i].statusName){
                        seriesData[j].data[personIndex] = data[i].statusCount;                            
                        break;
                    }
                }
            }

            //Build Chart
            IWSChartBuilder.Utilities.loadStackedBarChartWithLink(xCategories, seriesData, "#engagementsByStatusChart", "Engagements by Status", "Total Projects");     
        }
    ).fail(
        function (engagements1) {
            $("#engagementsByStatusChart").html("<strong>An error has occurred.</strong>");
        }
    );
};

return {
    load: load
}

}();

我现在正在尝试的方式

plotOptions: {
            series: {
                cursor: 'pointer',
                stacking: 'normal',
                point: {
                    events: {
                        click: function () {
                            getURL(this, xCategories, seriesData);
                        }
                    }
                }
            }
        },

function getURL(chartInfo, xCategories, seriesData) {

var baseUrl = "correctURL" + xCategories[chartInfo._i] + "-FilterField2%3DEngagement%255Fx0020% 255FStatus-FilterValue2%3D" + chartInfo.name;
location.href = baseUrl;

}

Answer 1

您正在连接到点击事件处理程序。在此处理程序中，“this”指的是点，而不是系列。

试试这个:

    plotOptions: {
        series: {
            cursor: 'pointer',
            stacking: 'normal',
            events: {
                    click: function () {
                        location.href = this.options.url;
                    }
            }                
        }
    },

http://jsfiddle.net/2DG84/

如果您需要依赖于点值和系列的 URL，您可以访问两者。例如

plotOptions: {
        series: {
            cursor: 'pointer',
            stacking: 'normal',
            point: {
                events: {
                    click: function () {
                        alert(this.series.options.url + "&y=" + this.y);         
                    }
                }
            }
        }
    },

在此示例中，通过我将 point.y 值添加到 UTL，该系列有一个基本 URL。

http://jsfiddle.net/Fygg2/