简体   繁体   中英

spline is not plotting after drilldown - HighCharts

I am working with highCharts drilldown. My graph is plotting proper before drilldown. The column and spline is properly getting plot according to X-axis and Y-axis in graph but after drilldown the graph spline is not draw according to Y-axis. I want to plot spline as like before drilldown.

Here is my html

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Here is my js code.

    $(function () {
    $('#container').highcharts({
        chart: {
            type: 'column',
            zoomType: 'xy',
            events: {
                drilldown: function (e){
                    if (!e.seriesOptions) {
                        var chart = this,
                        drilldowns = {
                            '2015':{
                                name: '2015',
                                data: [
                                    ['Q4-2015',89]
                                ]
                            },
                            '2016':{
                                name: '2016',
                                data: [
                                    ['Q2-2016',95],
                                    ['Q3-2016',99]
                                ]
                            }
                        },
                        drilldownsLines = {
                            '2015':{
                                type: 'spline',
                                name: '2015',
                                data: [
                                    ['Q4-2015',11.45]
                                ]
                            },
                                '2016':{
                                type: 'spline',
                                name: '2016',
                                data: [
                                    ['Q2-2016',11.2],
                                    ['Q3-2016',11.5]
                                ]
                            }
                        },
                        series = drilldowns[e.point.name],
                        seriesLine = drilldownsLines[e.point.name];
                        chart.addSingleSeriesAsDrilldown(e.point, series);
                        chart.addSingleSeriesAsDrilldown(e.point, seriesLine);
                        chart.applyDrilldown();
                    }
                }
            }
        },
        title: {
            text: 'Rental & Capital Value Trend'
        },
        xAxis: {
            type: 'category',
        },
        yAxis: [{
            min: 0,
            title: {
                text: 'Rental Value (INR/SF/Month)'
            },
            labels: {
                format: '{value}'
            }
        }, {
            min:0,
            tickInterval:5,
            title: {
                text: 'Capital Value (INR/SF)'
            },
            labels: {
                format: '{value} K'
            },
            opposite:true
        }],
        tooltip:{
            formatter:function(){
                var s='';
                $.each(this.points, function () {
                    if(this.series.type == 'spline'){
                        s += '<br/>Capital Value : ' + this.y+ 'K';
                    }else{
                        s += '<br/> Rental Value : ' + this.y;
                    }
                });
                return s;
            },
            shared:true
        },
        legend: {
            layout: 'horizontal',
            align: 'left',
            size: '12px',
            x: 50,
            verticalAlign: 'bottom',
            y: 20,
            floating: true
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: false
                }
            }
        },
        series: [{
                name: 'Renatl Value (INR/SFT/Month)',
                color: '#EE8908',
                data: [
                    {
                        name: '2015',
                        y: 89,
                        drilldown: true
                    }, {
                        name: '2016',
                        y: 90,
                        drilldown: true
                    }
                ]
            },{
                name:'Capital Value (INR/SF)',
                color:'#F8BB6C',
                type:'spline',
                yAxis:1,
                data:[
                    {
                        name:'2015',
                        y:11.45
                    },{
                        name:'2016',
                        y:15.22
                        }
                ],
                tooltip: {
                    valueSuffix: 'K'
                }
            }
        ],
        drilldown: {
            /*activeAxisLabelStyle: {
                textDecoration: 'none'
            },*/
            series: []
        }
    });
});

On drilldown events you are creating new spline series and you don't specify y axis for them - by default they will be scaled with the use of the first y axis.

Specify a correct yAxis (should be 1 in your example) for the series and the spline will be drawn as you expect.

 drilldownsLines = {
                        '2015':{
                            type: 'spline',
                            name: '2015',
                            data: [
                                ['Q4-2015',11.45]
                            ],
                            yAxis: 1
                        },
                            '2016':{
                            type: 'spline',
                            name: '2016',
                            yAxis: 1,
                            data: [
                                ['Q2-2016',11.2],
                                ['Q3-2016',11.5]
                            ]
                        }
                    },

example: https://jsfiddle.net/2pd1natw/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM