2
У меня есть диаграмма HighCharts с двумя сериями. Каждая точка данных может быть просверлена, чтобы показать подзаголовок: http://jsfiddle.net/9phfzewj/21/Highcharts несколько диаграмм столбца с детализацией, правильное форматирование осей бурения
Проблема заключается в том, что когда я нажимаю на метку оси X, я переводится на подзаголовок с двумя показанными сериями. Знаки оси X этого подзаголовка соответствуют только одному из представленных серий, а заголовок оси и название графика также относятся только к одной из серий. Я хотел бы иметь метки оси x для каждой представленной серии (возможно, может быть вторичная ось X?), А также иметь возможность правильно изменять названия.
Может ли кто-нибудь помочь мне улучшить это и устранить проблемы?
Большое спасибо,
Дэвид
$(function() {
var chart;
var defaultTitle = "CT doses";
var protocolNames = ['Abdomen','Chest','Sinus'];
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
events: {
drilldown: function(e) {
parentSeriesIndex = e.point.series.index;
parentSeriesName = e.point.series.name;
var this_series_title = parentSeriesName.indexOf('DLP') != -1 ? ' DLP' : ' CTDIvol';
chart.setTitle({ text: e.point.name + this_series_title}, { text: '(n = ' + e.point.x +')' });
chart.yAxis[0].setTitle({text:'Number'});
chart.xAxis[0].setTitle({text:parentSeriesName.indexOf('DLP') != -1 ? 'DLP range (mGy.cm)' : 'CTDIvol range (mGy)'});
chart.xAxis[0].setCategories([], true);
chart.tooltip.options.formatter = function(args) {
return this.y.toFixed(0);
};
chart.yAxis[1].update({
labels: {
enabled: false
},
title: {
text: null
}
});
},
drillup: function(e) {
chart.setTitle({ text: defaultTitle }, { text: '' });
chart.yAxis[0].setTitle({text:'DLP (mGy.cm)'});
chart.yAxis[1].setTitle({text:'CTDIvol (mGy)'});
chart.xAxis[0].setTitle({text:''});
chart.xAxis[0].setCategories(protocolNames, true);
chart.xAxis[0].update({labels:{rotation:90}});
chart.yAxis[1].update({
labels: {
enabled: true
},
title: {
text: 'CTDIvol (mGy)'
}
});
}
}
},
title: {
text: 'CT doses'
},
xAxis: {
title: {
useHTML: true
},
categories: protocolNames,
labels: {
useHTML: true,
rotation:90
}
},
yAxis: [{
min: 0,
title: {
text: 'DLP (mGy.cm)'
}
}, {
title: {
text: 'CTDIvol (mGy)'
},
opposite: true
}],
legend: {
align: 'center',
verticalAlign: 'top',
floating: true,
borderWidth: 0,
x: 0,
y: 40
},
tooltip: {
shared: true
},
plotOptions: {
column: {
borderWidth: 0
}
},
series: [{
name: 'DLP',
data: [{
name: 'Abdomen',
y: 150,
drilldown: 'AbdomenDLP'
}, {
name: 'Chest',
y: 73,
drilldown: 'ChestDLP'
}, {
name: 'Sinus',
y: 20,
drilldown: 'SinusDLP'
}],
tooltip: {
valueSuffix: ' mGy.cm'
}
}, {
name: 'CTDI',
data: [{
name: 'Abdomen',
y: 57.2,
drilldown: 'AbdomenCTDI'
}, {
name: 'Chest',
y: 25.8,
drilldown: 'ChestCTDI'
}, {
name: 'Sinus',
y: 43.4,
drilldown: 'SinusCTDI'
}],
tooltip: {
valueSuffix: ' mGy'
},
yAxis: 1
}],
drilldown: {
series: [{
name: 'Abdomen',
id: 'AbdomenDLP',
data: [
['up to 150', 4],
['up to 200', 2],
['up to 250', 1],
['up to 300', 2],
['up to 350', 1]
]
}, {
name: 'Chest',
id: 'ChestDLP',
data: [
['up to 100', 40],
['up to 110', 21],
['up to 120', 24],
['up to 130', 32],
['up to 140', 64]
]
}, {
name: 'Sinus',
id: 'SinusDLP',
data: [
['up to 130', 4],
['up to 140', 2],
['up to 150', 6],
['up to 160', 7],
['up to 170', 9]
]
}, {
name: 'Abdomen',
id: 'AbdomenCTDI',
data: [
['up to 20', 4],
['up to 22', 9],
['up to 24', 12],
['up to 26', 8],
['up to 28', 2]
]
}, {
name: 'Chest',
id: 'ChestCTDI',
data: [
['up to 10', 4],
['up to 12', 9],
['up to 14', 12],
['up to 16', 8],
['up to 18', 2]
]
}, {
name: 'Sinus',
id: 'SinusCTDI',
data: [
['up to 14', 4],
['up to 16', 9],
['up to 18', 12],
['up to 20', 8],
['up to 22', 2]
]
}]
}
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://highslide-software.github.io/export-csv/export-csv.js"></script>
<script src="http://github.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
Вы можете добавить второй XAxis, и подключить некоторые серии к этой оси: http://jsfiddle.net/9phfzewj/23/Какие проблемы у вас есть с титулом? –
Hi Pawel, Большое спасибо за помощь, добавив вторую ось x - это намного лучше. Я обновил его немного больше: http://jsfiddle.net/9phfzewj/24/ В идеале я хотел бы, чтобы обе оси Х отображали свой заголовок, когда показан суб-график с обеими сериями - на данный момент помечена только верхняя ось х. Мне также понравилось бы название подзаголовка, в котором две серии заканчиваются «DLP и CTDIvol», а не просто «CTDIvol». Наконец, я хотел бы, чтобы легенда о подзаголовках включала в себя как «DLP», так и «CTDI». Можете ли вы помочь с любым из вышеперечисленных? С уважением, David – David
Я разобрал маркировку обеих осей x в развертке: http://jsfiddle.net/9phfzewj/25/, но все же необходимо разобраться в развернутой диаграмме записи легенды и название диаграммы, когда отображаются две серии. – David