Highcharts将url添加到柱形图

时间:2013-12-03 14:15:26

标签: javascript sharepoint highcharts

我是Highcharts,Sharepoint和JS的新手。我需要做的是使每个栏链接到SharePoint视图 此代码获取数据

IWSChartBuilder.EngagementsSegmentChart = function(){

var load = function () {
    var year = new Date().getFullYear();
    //Variable to hold counts
    var countArray = [];

    $.when(
        //Consulting Engagements List
        IWSChartBuilder.RESTQuery.execute("valid REST query")
    ).done(
        function (engagements1) {
            var dataArray = [];
            var countArray = [];
            //Get data from Consulting Engagements list
            var results = engagements1.d.results;
            for (var i = 0; i < results.length; i++) {
                for (var i = 0; i < results.length; i++) {
                    dataArray.push(results[i].Segment);
                }
            }

    var baseUrl = "valid url";
            countArray = IWSChartBuilder.Utilities.buildCategoryCountsWithLink(countArray, dataArray, baseUrl);

            //Put data into format for stacked bar chart
            var seriesData = [];
            var xCategories = [];
            var links = [];
            for (var i = 0; i < countArray.length; i++) {
                xCategories.push(countArray[i].name);
                seriesData.push(countArray[i].y);
                links.push(countArray[i].url);
            }
            //Build Chart
            IWSChartBuilder.Utilities.loadColumnChartWithLink(links, xCategories, seriesData, "#engagementSegmentChart", "Engagements by Segment", "Total Projects");
        }
    ).fail(
        function (engagements1) {
            $("#engagementSegmentChart").html("<strong>An error has occurred.</strong>");
        }
    );
};

return {
    load: load
}
}();

//显示图表的代码

loadColumnChartWithLink = function (xCategories, seriesData, divId, chartTitle, yAxisTitle) {
    //Build Column Chart
    $(divId).highcharts({
        chart: {
            type: 'column'
        },
        credits: {
            enabled: false
        },
        title: {
            text: chartTitle
        },
        xAxis: {
            categories: xCategories,
            allowDecimals: false,
            labels: {
                rotation: -45,
                align: 'right'
            }
        },
        yAxis: {
            min: 0,
            allowDecimals: false,
            title: {
                text: yAxisTitle
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: false
                }
            },
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function() {
                            location.href = this.options.url;
                        }
                    }
                }
            }
        },
        series: [{
            name: yAxisTitle,
            data: seriesData
        }]
    });
},

非常感谢任何帮助 标记

1 个答案:

答案 0 :(得分:0)

您需要调整数据以将对象创建为点,例如:

{y:10,url:'http://google.com'}

然后在serie的点上捕捉点击事件。

http://jsfiddle.net/2tL5T/