Question

我有一个堆积的条形图我试图让图表中的每个项目都被点击，根据点击的内容打开sharepoint视图。

我在这里构建数据

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，则可以同时访问这两者。 e.g。

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

在这个例子中，系列中有一个基本URL，我将使用point.y值添加到UTL。

http://jsfiddle.net/Fygg2/

添加每个堆积条形图项的链接

1 个答案: