0

I am new to Highcharts and Json data. I am trying to draw pretty simple column chart but failing to do so. below is my code.

HTML:

<div id="container"></div>

Javascript:

 $(document).ready(function () {
            $.ajax({
                url: 'HighCharts.aspx/GetServices',
                type: 'POST',
                async: true,
                dataType: 'json',
                contentType: 'application/json',
                data: '{}',
                success: function (response) {
                    DrawServices(response.d);
                },
                error: function () {
                    window.open("ErrorPage.aspx", "_self")
                }
            });
        });

        function DrawServices(data) {
            debugger;
            if (data == null) {
                window.open("ErrorPage.aspx","_self")
            }
            else {               
                $('#container').highcharts({
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: 'Services Data'
                    },
                    xAxis: {
                        categories: data[0].Name
                    },
                    yAxis: {
                        title: {
                            text: 'Total Servcies Requested'
                        }
                    },
                    series: data[0].Total
                });
            }
        }

JSON response

[{"Name":"Access the company internet","Total":489},{"Name":"Application Enhancement","Total":97},{"Name":"Catering Service","Total":250},{"Name":"Desktop","Total":350},{"Name":"Development and Consultation","Total":566},{"Name":"Email","Total":175},{"Name":"Laptop","Total":200},{"Name":"Maintenance","Total":32},{"Name":"Push Email","Total":700},{"Name":"Vehicle Sticker","Total":1200}]

Please guide me what i am doing wrong. blank chart is displaying

4

1 回答 1

0

您可以将 x 轴类型设置为category并将数据映射到 Highcharts 所需的格式，例如：[point.name, point.y]

    xAxis: {
        type: 'category'
    },
    series: [{
        data: data.map(el => [el.Name, el.Total])
    }]

现场演示：http: //jsfiddle.net/BlackLabel/r709soxe/

API参考：

https://api.highcharts.com/highcharts/xAxis.type

https://api.highcharts.com/highcharts/series.column.data

于 2020-12-08T10:17:18.670 回答