如何添加系列:名称,数据& xAxis:在区域图表中动态格式化?

时间:2018-04-05 06:10:07

标签: jquery json highcharts

我使用下面的代码显示区域图表,并使用ajax函数从数据库传递系列值和类别值。 这个变量YEAR,POSITION_TYPE,POSITION_SALARY我需要传递区域图series:name,data,xAxis: formatter

但是,我的图表没有以正确的格式显示。 那么如何将此变量传递给系列:name,data& xAxis:动态格式化。

重新获取我的图表的当前图像 area chart

//This is Result variable data



 (4) [{…}, {…}, {…}, {…}]
    0:{POSITION_TYPE: "Permanent", POSITION_SALARY: "9000", YEAR: "2015"}
    1: {POSITION_TYPE: "Permanent", POSITION_SALARY: "13000", YEAR: "2016"}
    2: {POSITION_TYPE: "Permanent", POSITION_SALARY: "1000", YEAR: "2017"}
    3: {POSITION_TYPE: "Permanent", POSITION_SALARY: "187333", YEAR: "2018"}
    length: 4__proto__: Array(0)




// begin area chart
    $.ajax({
        type: "GET",
        url: "/api/ReportAPI/Get_Area_Chart_FTE_PAYROLL_DETAILS",
        data: '{}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (Result) {
            var data = [];
            var categories = [];
            for (var i in Result) {
                var serie = new Array(Result[i].YEAR);
                //var serie = Result[i].YEAR;
                // alert(serie);
                console.log(serie);
                categories.push(serie);
                var fte = {
                    name: Result[i].POSITION_TYPE,
                    data: JSON.parse("[" + Result[i].POSITION_SALARY + "]")
                };
                data.push(fte);
            }
            DreawAreaChart(categories, data);
        },
        failure: function (response) {
            alert(response.responseText);
        },
        error: function (response) {
            alert(response.responseText);
        }
    });
    function DreawAreaChart(categories, dataArray) {
        //alert(categories);
        Highcharts.chart('container3', {
            chart: {
                type: 'area'
            },
            title: {
                text: 'Employee FTE and Payroll Details'
            },
            subtitle: {
                //text: 'Source: WorldClimate.com'
            },
            xAxis: {
                allowDecimals: false,
                labels: {
                    //formatter: function () {
                    //    alert(this.value);
                    //    return this.value; // clean, unformatted number for year
                    //}

                    formatter: function () {
                      //  alert(this.value);
                        //categories = [];
                        //for (var i = 0; i < categories.length; i++) {
                        //    alert(categories[i]);
                        //    return categories[i];
                        //}
                        return categories;
                             // clean, unformatted number for year

                    }
                    //formatter:categories

                    //formatter: function (categories) {
                    //    for (var i in categories) {
                    //        // var serie = new Array(Result[i].YEAR);
                    //        var serie = categories[i].YEAR; alert(serie);
                    //        return serie; // clean, unformatted number for year
                    //    }
                    //}
                }
            },
            yAxis: {
                title: {
                    text: 'Salary'
                },
                labels: {
                    formatter: function () {
                        return this.value / 1 + 'k';
                    }
                }
            },
            tooltip: {
                pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>yearly in {point.x}'
            },
            plotOptions: {
                area: {
                    pointStart: 1950,
                    marker: {
                        enabled: false,
                        symbol: 'circle',
                        radius: 2,
                        states: {
                            hover: {
                                enabled: true
                            }
                        }
                    }
                }
            },
            series:  dataArray
           });
    }
    // End area chart

0 个答案:

没有答案