シリーズと xAxis データを含む json を使用したハイチャートバー

debugcn 投稿 Dev

アハマド・ダルマワン

データを年ごとの棒グラフに表示し、年ごとの合計データを表示したい。これは例えばデータです:

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>

したがって、私の質問は次のとおりです。

-返されるJSONをサンプルデータに変換する方法 *Var getData および *Var getCategories。

ありがとう。

ディネッシュ未定義

array.forEach関数を使用して、応答から必要なデータを抽出します。

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);
          
    });

<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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]