Javascript 向下钻取后样条曲线未打印-高图表
我正在与highCharts深入合作。向下钻取之前,我的图形正在正确绘制。列和样条曲线根据图形中的X轴和Y轴正确绘制,但向下钻取后,图形样条曲线不会根据Y轴绘制。我想在深入之前绘制样条曲线 这是我的htmlJavascript 向下钻取后样条曲线未打印-高图表,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">&
<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不是一个函数
非常感谢你,它对我来说工作得很好!!欣赏你的鹰眼。