Составной столбец с использованием c3.js с внешними данными

Я нанес анализ жалоб на столбчатую диаграмму с накоплением.

Мне удалось заставить мой график работать, используя c3.js и внешние данные. Посмотрите снимок экрана

Однако код получает только 3 проблемы из внешних данных. Данные поступают с открытой платформы. Посмотрите, как это выглядит

Я использовал джаваскрипт.

Вот код. Фрагмент показывает, как я преобразовал данные и заставил их работать на c3.js.

` 

$(document).ready(function () {

$.getJSON('http://opendata.arcgis.com/datasets/4ceee74d7dce4445b5c6582722b8c523_0/FeatureServer/0/query?where=1%3D1&outFields=ISSUE,PERCENTAGE,YEAR&outSR=4326&f=json', function(complaint_data){

        var open_data  = complaint_data.features;
        var i, j, k;


        var dataset = [];
        var dataset2 = [];
        var dataset3 = [];
        var dataset_final = [];
        var modified_data = [];

        var mini_data = [];
        var mini_data2 = [];
        var mini_data3 = [];

        // Get all non-zero percentages
        for(i=0,k=0; i<open_data.length; ++i,++k){

            v = parseFloat(open_data[i]['attributes']['PERCENTAGE'].split('%'));

            if(v > 0){
                modified_data[k] = open_data[i];
            }else{
                --k;
            }


        }

        //console.log(modified_data)
        full_data = []
        some_d = [];

        for(j=0; j<modified_data.length; ++j){


            pvalue = parseFloat(modified_data[j]['attributes']['PERCENTAGE'].split('%'));


            if(modified_data[j]['attributes']['ISSUE']=="Abuse Of Power"){

                mini_data.push(pvalue)

                dataset[modified_data[j]['attributes']['ISSUE']] = {

                    data:mini_data
                }

            }else if(modified_data[j]['attributes']['ISSUE']=="Delay"){

                mini_data2.push(pvalue)

                dataset2[modified_data[j]['attributes']['ISSUE']] = {

                    data:mini_data2
                }
            }else if(modified_data[j]['attributes']['ISSUE']=="Inefficiency"){

                mini_data3.push(pvalue)

                dataset3[modified_data[j]['attributes']['ISSUE']] = {

                    data:mini_data3
                }
            }


        }

        dataset_final2 = ['Abuse_Of_Power']
        dataset_final3 = ['Delay']
        dataset_final4 = ['Inefficiency']

        for(q=0;q<dataset['Abuse Of Power']['data'].length; q++){
            dataset_final2.push(dataset['Abuse Of Power']['data'][q])
            dataset_final3.push(dataset2['Delay']['data'][q])
            dataset_final4.push(dataset3['Inefficiency']['data'][q])
        }



       // console.log(full_data)

        var chart = c3.generate({
            bindto: '#c3_container',
            title:{
                text: 'Analysis Of Complaints Received By Service Issues, Abuse of Power, Delay, Inefficiency 2012-2015'
            },
            data: {
                columns: [
                    dataset_final2,
                    dataset_final3,
                    dataset_final4
                ],
                type: 'bar',
                groups: [
                    ['Abuse_Of_Power', 'Delay', 'Inefficiency']
                ],
            },

            grid: {
                y: {
                   show:true
                }
            },
            axis: {
                x: {
                    type: 'category',
                    categories: ['by 31-Dec-2012','by 31-Dec-2013', 'by 31-Dec-2014', 'by 31-Dec-2015'],
                    label: 'Year'
                },
                y: {
                    label: 'Percentage %',
                    tick: {
                        format: function (d) { return d+"%"; }
                    }

                }
            }
        });


     })
      });

`

Мой вопрос заключается в том, как я могу вывести все проблемы/жалобы на график, не просматривая операторы if else. Я думаю, что есть более эффективный способ построения диаграммы с накоплением, учитывая, как данные поступают с открытой платформы. Я не знаю, как использовать javascript. Любые идеи, чтобы указать мне в хорошем направлении?


javascript stacked-chart c3.js
person Brian Hawi    schedule 04.04.2017    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Если вы не хотите использовать if else, вам нужно создать json на стороне сервера, а затем вам нужно отобразить его напрямую. Таким образом, в c3.js всегда первым значением будет имя данных, т.е.

{ "obj":{
['data1',12,33,34,43],
['data2',22,44,55,66]

} }

Это просто грубая идея. но вы можете пойти с этим направлением. Надеюсь, это поможет.

person Bhargav Patel    schedule 05.04.2017