Я новичок в javascript и не могу понять, как создать сгруппированную гистограмму из csv-файла с использованием API-интерфейсов Highcharts и javascript. Я задал этот же вопрос на форуме поддержки на хай-чартах, но пока не получил желающих. Мне всегда очень везло в поиске ответов. Я создал график, который я хочу здесь:
http://maine.gov/mdot/about/assets/hwy/charttest-hbar2.html.
Вот код для этой диаграммы с серией, созданной из API старших диаграмм:
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'bar'
},
title: {
text: 'Customer Service Levels'
},
xAxis: {
title:{
text: 'Highway Corridor Priority'
},
categories: ['1', '2', '3'],
labels: {
formatter: function() {
return '<span style="font-weight:bold;color:#ed1c24;">'+this.value+'</span> Safety<br/><br/> Condition<br/><br/> Service';
},
}
},
yAxis: {
min: 0,
title: {
text: 'Percent of Miles'
}
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y +' mi';
}
},
plotOptions: {
series: {
stacking: 'percent'
}
},
series: [
// for priority 1 corridor
{
name: 'D',
data: [304.69, 277.92, 139.94], // safety, condition, service
color: '#ff647f',
stack: 1
}, {
name: 'C',
data: [482.5, 499.04, 104.54], // safety, condition, service
color: '#0095c5',
stack: 1
}, {
name: 'B',
data: [720.13, 678.64, 299.5], // safety, condition, service
color: '#ffd600',
stack: 1
}, {
name: 'A',
data: [379.02, 415.35, 1475.39], // safety, condition, service
color: '#3cb878',
stack: 1
},
// for priority 2 corridor
{
name: 'D',
data: [157.56,99.88,16.34], // safety, condition, service
color: '#ff647f',
stack: 2,
showInLegend: false
}, {
name: 'C',
data: [374.97,347.18,36.39], // safety, condition, service
color: '#0095c5',
stack: 2,
showInLegend: false
}, {
name: 'B',
data: [167.21,358.19,210.67], // safety, condition, service
color: '#ffd600',
stack: 2,
showInLegend: false
}, {
name: 'A',
color: '#3cb878',
data: [187.75, 89.15, 680.06], // safety, condition, service
stack: 2,
showInLegend: false
},
// for priority 3 corridor
{
name: 'D',
data: [188.79,186.91,36.78], // safety, condition, service
color: '#ff647f',
showInLegend: false,
stack: 3
}, {
name: 'C',
data: [507.07,337,209.16], // safety, condition, service
color: '#0095c5',
showInLegend: false,
stack: 3
}, {
name: 'B',
data: [684.08,582.52,545.03], // safety, condition, service
color: '#ffd600',
stack: 3,
showInLegend: false
}, {
name: 'A',
color: '#3cb878',
data: [60.54, 299.94, 683.42], // safety, condition, service
stack: 3,
showInLegend: false
}]
});
});
Ниже приводится CSV:
CORRIDOR_PRIORITY|CSL_TYPE|SCORE|CSL_LENGTH
1|Safety|A|391
1|Safety|B|679
1|Safety|C|365
1|Safety|D|202
1|Safety|F|97
1|Service|A|1028
1|Service|B|513
1|Service|C|166
1|Service|D|17
1|Service|F|9
1|Condition|A|357
1|Condition|B|536
1|Condition|C|490
1|Condition|D|133
1|Condition|F|105
2|Safety|A|279
2|Safety|B|286
2|Safety|C|173
2|Safety|D|94
2|Safety|F|128
2|Service|A|799
2|Service|B|101
2|Service|C|33
2|Service|D|4
2|Service|F|22
2|Condition|A|189
2|Condition|B|307
2|Condition|C|241
2|Condition|D|130
2|Condition|F|88
3|Safety|A|488
3|Safety|B|517
3|Safety|C|424
3|Safety|D|226
3|Safety|F|321
3|Service|A|1535
3|Service|B|208
3|Service|C|57
3|Service|D|166
3|Service|F|10
3|Condition|A|380
3|Condition|B|654
3|Condition|C|458
3|Condition|D|275
3|Condition|F|197
4|Safety|A|333
4|Safety|B|507
4|Safety|C|433
4|Safety|D|347
4|Safety|F|344
4|Service|A|1114
4|Service|B|83
4|Service|C|762
4|Service|D|3
4|Service|F|3
4|Condition|A|896
4|Condition|B|525
4|Condition|C|308
4|Condition|D|153
4|Condition|F|71
5|Safety|A|338
5|Safety|B|584
5|Safety|C|697
5|Safety|D|367
5|Safety|F|431
5|Service|A|898
5|Service|B|78
5|Service|C|1434
5|Service|D|5
5|Service|F|3
5|Condition|A|747
5|Condition|B|787
5|Condition|C|509
5|Condition|D|253
5|Condition|F|103
Первым номером будет номер стека. Последний номер - это пробег. Возможно, мы сможем по-разному отформатировать CSV, если это будет иметь значение - это исходит от BIQuery. Возможно стек # | оценка | безопасность # | условие # | сервис #.
Из-за многомерных данных я совершенно не понимаю, как передавать данные в API диаграмм.