2017-08-28 54 views
-1

我JSON数据如何创建堆栈条形图与使用setData对象在Javascript

{ 
    "data":[ 
    { "month" : "January", 
     "name" : "John", 
     "count" : 10 
    }, 
    { 
     "month" : "January", 
     "name" : "Jane", 
     "count" : 15 
    } 
    ] 
}, 
{ 
    "data":[ 
    { "month" : "February", 
     "name" : "Mark", 
     "count" : 20 
    }, 
    { "month" : "February", 
     "name" : "Max", 
     "count" : 30 
    } 
    ] 
} 

例如这里:https://www.highcharts.com/demo/bar-stacked

如何参考使用setData对象堆叠条形图?
我尝试console.log(setdata[0]['data'][0]['month']);
返回 “一月”,它的作品找到,但

for(i=0 ; i<result.length ; i++){ 
    console.log(setdata[i]['data'][i]['month']); 
} 

这是错误。

+1

你缺少一个 “” 值后 “名”,你需要一个逗号。 –

+0

你的'JSON'无效。在这里验证'JSON' https://jsonlint.com/ – Shiladitya

+0

这里是什么'setdata'? – choasia

回答

0

可以使用D3叠置条chart-

let innerColumns = { 
    'column1': ['value3'], 
    'column2': ['value1', 'value2'], 
}; 

let dataset = d3.layout.stack()(['value1', 'value2', 'value3'].map((value) => { 
    return data.map((d: any) => { 
    return { x: obj[d.xAxis], y: d.value }; 
    }); 
})); 

let x = d3.scale.ordinal() 
    .domain(dataset[0].map((d) => { return d.x; })) 
    .rangeBands([0, width], 1); 

let y = d3.scale.linear() 
    .domain([0, d3.max(dataset, (d) => { 
    return d3.max(d, (d1) => { return d1.y0 + d1.y; }); 
    })]) 
    .range([height, 0]); 

更多: https://github.com/amanjain325/angular-d3-charts/tree/master/src/app/multi-bar-chart