Question

我想用年份显示数据到年度和总和数据的条形图。这是例如数据：

Tahun   TotalMajor  TotalMinor  TotalPNC
2015        10          10          80
2016        20          20          60
2017        30          30          40
2018        40          40          20
2021        50          50          0

在vb.net中使用json在hightchart jquery中呈现数据。这是我的json的结果：

[{"Tahun":2015,"TotalMajor":10,"TotalMinor":10,"TotalPNC":80},
{"Tahun":2016,"TotalMajor":20,"TotalMinor":20,"TotalPNC":60},
{"Tahun":2017,"TotalMajor":30,"TotalMinor":30,"TotalPNC":40},
{"Tahun":2018,"TotalMajor":40,"TotalMinor":40,"TotalPNC":20},
{"Tahun":2019,"TotalMajor":50,"TotalMinor":50,"TotalPNC":0}]

这是我的jquery：

<script type="text/javascript">
    function ReturnData(result) { 

        var getData = [{ name: 'Major', data: [10, 20, 30, 40, 50] },{ name: 'Minor', data: [10, 20, 30, 40, 50] },{ name: 'PNC', data: [80, 60, 40, 20, 0] }];
        var getCategories = ['2015', '2016', '2017', '2018', '2021'];

        Highcharts.chart('container', {
            chart: {
                type: 'column'
            },
            colors: ['red', 'yellow', 'blue'],
            title: {
                text: 'Summary Jumlah CPAR'
            },
            xAxis: {
                categories: getCategories, //['2015', '2016', '2017'],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'TOTAL'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                                        '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: getData
        });
    }
    $(document).ready(function () {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "WSPieData.asmx/getData",
            data: "{}",
            dataType: "json",
            success: function (result) {
                ReturnData(result);
            },
            error: function (result) {
                alert("Error");
            }
        }); 
    }); 
</script>

所以，我的问题是：

-how将return json转换为样本数据* Var getData和* Var getCategories。

感谢。

Answer 1

使用array.forEach功能从您的回复中提取所需数据。

＆＃13;

function ReturnData(data) { 
         var major_data = [];
         var minor_data = [];
         var pnc_data = [];
         var categories = [];
         data.forEach(function(obj){
                  major_data.push(obj.TotalMajor);
                  minor_data.push(obj.TotalMinor);
                  pnc_data.push(obj.TotalPNC);
                  categories.push(obj.Tahun);
         });


        var getData = [{ name: 'Major', data:major_data  },{ name: 'Minor', data: minor_data },{ name: 'PNC', data: pnc_data}];
        var getCategories =categories;

        Highcharts.chart('container', {
            chart: {
                type: 'column'
            },
            colors: ['red', 'yellow', 'blue'],
            title: {
                text: 'Summary Jumlah CPAR'
            },
            xAxis: {
                categories: getCategories, //['2015', '2016', '2017'],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'TOTAL'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                                        '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: getData
        });
    }
    $(document).ready(function () {
       
        var data = [{"Tahun":2015,"TotalMajor":10,"TotalMinor":10,"TotalPNC":80},
{"Tahun":2016,"TotalMajor":20,"TotalMinor":20,"TotalPNC":60},
{"Tahun":2017,"TotalMajor":30,"TotalMinor":30,"TotalPNC":40},
{"Tahun":2018,"TotalMajor":40,"TotalMinor":40,"TotalPNC":20},
{"Tahun":2019,"TotalMajor":50,"TotalMinor":50,"TotalPNC":0}];
       
       
                ReturnData(data);
          
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.12/highcharts.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.12/css/highcharts.css" rel="stylesheet"/>

<div id="container"></div>

＆＃13;

使用json与系列和xAxis数据的高图栏

1 个答案: