2
我有一個HighCharts圖表繪製兩個系列。可以向下鑽取每個數據點以顯示小圖： http://jsfiddle.net/9phfzewj/21/Highcharts多列圖表與下拉，正確格式的下拉軸
我遇到的問題是，當我點擊一個x軸標籤時，我被帶到一個顯示兩個系列的子圖。此子圖的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>
您可以添加第二個X軸，並連接一些串聯到軸：http://jsfiddle.net/9phfzewj/23 /冠軍有什麼樣的麻煩？ –
嗨帕維爾， 非常感謝您通過添加第二個x軸的幫助 - 這好多了。我已經更新了一點： http://jsfiddle.net/9phfzewj/24/ 理想情況下，我希望兩個x軸都顯示他們的標題，當兩個系列的子情節顯示 - 此刻只有頂部的x軸被標記。 我還想要顯示兩個系列以「DLP和CTDIvol」而不是「CTDIvol」結尾的子圖的標題。 最後，我希望子圖的圖例包含適當的「DLP」或「CTDI」。 你能夠幫助任何上述？ Regards， David – David
我已經整理了下鑽中兩個x軸的標籤：http://jsfiddle.net/9phfzewj/25/，但仍需要整理鑽取圖表圖例條目和圖表標題，當它顯示兩個系列時。 – David