簡體   English   中英

Highcharts將url添加到柱形圖

[英]Highcharts adding url to column chart

我是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
        }]
    });
},

任何幫助,萬分感謝Mark

您需要調整數據以創建對象作為點,如示例中所示:

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

然后在意甲點捕獲點擊事件。

http://jsfiddle.net/2tL5T/

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM