使用 c3.js 与外部数据堆叠列答案

【问题标题】：Stacked column using c3.js with external data使用 c3.js 与外部数据堆叠列
【发布时间】：2017-04-04 16:50:40
【问题描述】：

我在堆积柱形图上绘制了投诉分析。

我设法使用 c3.js 和外部数据使我的图表正常工作。 See the screen shot

但是，代码仅从外部数据中获取 3 个问题。数据来自一个开放的平台。 Check out how it looks

我使用了 javascript。

这里是代码。 sn-p 显示了我是如何转换数据并使其在 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 c3.js stacked-chart

【解决方案1】：

如果你不想使用 if else 那么你必须从服务器端创建 json 然后你必须直接渲染它。所以在 c3.js 中，第一个值总是数据名称，即

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

} }

这只是粗略的想法。但你可以朝着这个方向前进。希望这会有所帮助。

【讨论】：