Highcharts多列图表，具有向下钻取，正确格式化钻取轴

I have a HighCharts chart with two series plotted. Each data point can be drilled down to show a sub-plot: http://jsfiddle.net/9phfzewj/21/

我有一个HighCharts图表,其中绘制了两个系列。可以向下钻取每个数据点以显示子图:http://jsfiddle.net/9phfzewj/21/

The problem I have is that when I click on an x-axis label I am taken to a sub-plot with two series shown. The x-axis labels of this sub-plot only correspond to one of the series being shown, and the x-axis title and chart title also only refer to one of the series. I would like to have the x-axis labels for each series shown (perhaps there could be a secondary x-axis?), and also be able to correctly change the titles.

我遇到的问题是,当我点击一个x轴标签时,我会看到一个显示两个系列的子图。该子图的x轴标签仅对应于所示系列之一,x轴标题和图表标题也仅指系列之一。我想为每个系列显示x轴标签(也许可能有一个辅助x轴?),并且还能够正确地更改标题。

Is anyone able to help me to improve this and fix the problems?

有人能帮我改进并解决问题吗?

Many thanks,

David

$(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>

1 个解决方案

#1

This is now fixed, thanks to the help offered from Pawel Fus. A working jsfiddle is here:

由于Pawel Fus提供的帮助,现在已经修复了。一个工作的jsfiddle在这里:

http://jsfiddle.net/9phfzewj/27/

If you click on an x-axis label this drills down to a plot that has two x-axes. Both of these are now labelled correctly, and the legend of the drilled-down plot is also correct.

如果单击x轴标签,则向下钻取到具有两个x轴的绘图。现在这两个都被正确标记,并且下钻图的图例也是正确的。

Regards,

David

$(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;
                    chart.setTitle({ text:''});
                    chart.yAxis[0].setTitle({text:'Number'});
                    if (parentSeriesName.indexOf('DLP') != -1) {
                        chart.xAxis[0].setTitle({text:'DLP range (mGy.cm)'});
                    }
                    if (parentSeriesName.indexOf('CTDI') != -1) {
                        chart.xAxis[1].setTitle({text:'CTDI range (mGy)'});
                    }
                    chart.xAxis[0].setCategories([], true);
                    chart.tooltip.options.formatter = function(args) {
                        if (this.series.name.indexOf('DLP') != -1) {
                            returnValue =  this.y.toFixed(0) + ', DLP series' + ', ' + this.x;
                        } else {
                            returnValue =  this.y.toFixed(0) + ', CTDI series' + ', ' + this.x;
                        }
                        return returnValue;
                    };
                    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[1].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
            },
            type: "category",
            //categories: protocolNames,
            labels: {
                useHTML: true,
                rotation:90
            }
        }, {
            title: {
                useHTML: true
            },
            type: "category",
            opposite: 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: -60,
            y: 70
        },
        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 DLP',
                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 DLP',
                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 DLP',
                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 CTDI',
                id: 'AbdomenCTDI',
                xAxis: 1,
                data: [
                    ['up to 20', 4],
                    ['up to 22', 9],
                    ['up to 24', 12],
                    ['up to 26', 8],
                    ['up to 28', 2]
                ]
            }, {
                name: 'Chest CTDI',
                id: 'ChestCTDI',
                xAxis: 1,
                data: [
                    ['up to 10', 4],
                    ['up to 12', 9],
                    ['up to 14', 12],
                    ['up to 16', 8],
                    ['up to 18', 2]
                ]
            }, {
                name: 'Sinus CTDI',
                id: 'SinusCTDI',
                xAxis: 1,
                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>