Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/php/244.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 向下钻取后样条曲线未打印-高图表_Javascript_Php_Highcharts - Fatal编程技术网

Javascript 向下钻取后样条曲线未打印-高图表

Javascript 向下钻取后样条曲线未打印-高图表,javascript,php,highcharts,Javascript,Php,Highcharts,我正在与highCharts深入合作。向下钻取之前,我的图形正在正确绘制。列和样条曲线根据图形中的X轴和Y轴正确绘制,但向下钻取后,图形样条曲线不会根据Y轴绘制。我想在深入之前绘制样条曲线 这是我的html <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/drilldown.js">&

我正在与highCharts深入合作。向下钻取之前,我的图形正在正确绘制。列和样条曲线根据图形中的X轴和Y轴正确绘制,但向下钻取后,图形样条曲线不会根据Y轴绘制。我想在深入之前绘制样条曲线

这是我的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>

这是我的js代码

    $(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: []
        }
    });
});
$(函数(){
$(“#容器”)。高图({
图表:{
键入:“列”,
zoomType:'xy',
活动:{
向下展开:函数(e){
如果(!e.系列选项){
var图表=此,
深入调查={
'2015':{
名称:“2015年”,
数据:[
['Q4-2015',89]
]
},
'2016':{
名称:“2016年”,
数据:[
['Q2-2016',95],
['Q3-2016',99]
]
}
},
钻孔下钻线={
'2015':{
类型:“样条线”,
名称:“2015年”,
数据:[
['Q4-2015',11.45]
]
},
'2016':{
类型:“样条线”,
名称:“2016年”,
数据:[
['Q2-2016',11.2],
['Q3-2016',11.5]
]
}
},
系列=向下钻取[e.point.name],
系列线=向下钻线[e.point.name];
图表。添加单一系列向下倾斜(e.点,系列);
图表。添加单一系列向下倾斜(e.点、系列线);
chart.applyDrilldown();
}
}
}
},
标题:{
文本:“租金和资本价值趋势”
},
xAxis:{
类型:'类别',
},
亚克斯:[{
分:0,,
标题:{
文本:“租金价值(卢比/平方英尺/月)”
},
标签:{
格式:“{value}”
}
}, {
分:0,,
时间间隔:5,
标题:{
正文:“资本价值(卢比/平方英尺)”
},
标签:{
格式:“{value}K”
},
相反:对
}],
工具提示:{
格式化程序:函数(){
var s='';
$.each(this.points,function(){
if(this.series.type=='spline'){
s+='
资本价值:'+this.y+'K'; }否则{ s+='
租金值:'+this.y; } }); 返回s; }, 分享:真的 }, 图例:{ 布局:“水平”, 对齐:“左”, 大小:“12px”, x:50, 垂直排列:“底部”, y:20, 浮动:对 }, 打印选项:{ 系列:{ 边框宽度:0, 数据标签:{ 已启用:false } } }, 系列:[{ 名称:“雷诺价值(卢比/平方英尺/月)”, 颜色:“#EE8908”, 数据:[ { 名称:“2015年”, y:89, 深入调查:正确 }, { 名称:“2016年”, y:90, 深入调查:正确 } ] },{ 名称:“资本价值(卢比/平方英尺)”, 颜色:“#F8BB6C”, 类型:'样条', 亚克西斯:1,, 数据:[ { 名称:'2015', y:11.45 },{ 名称:'2016', y:15.22 } ], 工具提示:{ valueSuffix:'K' } } ], 向下展开:{ /*activeAxisLabelStyle:{ text装饰:“无” },*/ 系列:[] } }); });
在深入事件中,您正在创建新的样条曲线系列,并且没有为它们指定y轴-默认情况下,它们将使用第一个y轴进行缩放

为序列指定正确的
yAxis
(在示例中应为
1
),样条线将按预期绘制

 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]
                            ]
                        }
                    },

示例:

你应该在这里发布你的代码,以便所有信息都可以在你的帖子上找到。这是我的代码@Niklesh_Chauhan。你的小提琴抛出了一个错误,声明
Uncaught TypeError:$(…)。highcharts不是一个函数
非常感谢你,它对我来说工作得很好!!欣赏你的鹰眼。