我正在尝试使用highcharts在向下钻取时组合显示柱形图和折线图，但没有获得成功，但是在没有向下钻取的情况下应用它时，它很容易显示两个图表。
我正在使用此代码：
$(function () {
var defaultTitle = "Total Distance By Site";
var drilldownTitle = "Ave. Journey Distance By Vehicle Type";
var ydrillupTitle = "km";
var ydrilldownTitle = "";
var xdrillupcat = ['Site A', 'Site B', 'Site C', 'Site D'];
var xdrilldowncat = ['Waste', 'Medium Truck', 'Mid-Sized', 'Car'];
var chart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'totdisbyloc',
events: {
drilldown: function(e) {
chart.setTitle({ text: drilldownTitle });
chart.xAxis[0].setCategories(xdrilldowncat);
chart.yAxis[0].axisTitle.attr({
text: ydrilldownTitle
});
},
drillup: function(e) {
chart.setTitle({ text: defaultTitle });
chart.xAxis[0].setCategories(xdrillupcat);
chart.yAxis[0].axisTitle.attr({
text: ydrillupTitle
});
}
}
},
title: {
text: defaultTitle
},
subtitle: {
text: ''
},
xAxis: {
categories: xdrillupcat
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: ydrillupTitle
}
},
plotOptions: {
column: {
stacking: 'normal',
showInLegend: true
}
},
series:[
{
name:'Car',
tooltip: {
headerFormat: '<span style="font-size:11px">{}</span>',
pointFormat: '<span>Car</span>: <b>{point.y}</b> of total: {point.stackTotal}<br/>'
},
data: [{
name: "Car",
title: "Ave. Journey Distance By Car",
y: 5,
drilldown: "Car"
}, {
name: "Mid-Sized",
title: "Ave. Journey Distance By Mid-Sized",
y: 4,
drilldown: "Mid-Sized"
}, {
name: "Medium Truck",
title: "Ave. Journey Distance By Medium Truck",
y: 3,
drilldown: "Medium Truck"
}, {
name: "Large Truck",
title: "Ave. Journey Distance By Large Truck",
y: 6,
drilldown: "Large Truck"
}]
},
{
name:'Mid-Sized',
tooltip: {
headerFormat: '<span style="font-size:11px">{}</span>',
pointFormat: '<span>Mid-Sized</span>: <b>{point.y}</b> of total: {point.stackTotal}<br/>'
},
data: [{
name: "Car",
title: "Ave. Journey Distance By Car",
y: 2,
drilldown: "Car"
}, {
name: "Mid-Sized",
title: "Ave. Journey Distance By Mid-Sized",
y: 2,
drilldown: "Mid-Sized"
}, {
name: "Medium Truck",
title: "Ave. Journey Distance By Medium Truck",
y: 3,
drilldown: "Medium Truck"
}, {
name: "Large Truck",
title: "Ave. Journey Distance By Large Truck",
y: 2,
drilldown: "Large Truck"
}]
},
{
name:'Medium Truck',
tooltip: {
headerFormat: '<span style="font-size:11px">{}</span>',
pointFormat: '<span>Medium Truck</span>: <b>{point.y}</b> of total: {point.stackTotal}<br/>'
},
data: [{
name: "Car",
y: 4,
drilldown: "Car"
}, {
name: "Mid-Sized",
y: 5,
drilldown: "Mid-Sized"
}, {
name: "Medium Truck",
y: 3,
drilldown: "Medium Truck"
}, {
name: "Large Truck",
y: 7,
drilldown: "Large Truck"
}]
},
{
name:'Large Truck',
tooltip: {
headerFormat: '<span style="font-size:11px">{}</span>',
pointFormat: '<span>Large Truck</span>: <b>{point.y}</b> of total: {point.stackTotal}<br/>'
},
data: [{
name: "Car",
y: 5,
drilldown: "Car"
}, {
name: "Mid-Sized",
y: 3,
drilldown: "Mid-Sized"
}, {
name: "Medium Truck",
y: 4,
drilldown: "Medium Truck"
}, {
name: "Large Truck",
y: 7,
drilldown: "Large Truck"
}]
}
],
drilldown: {
series: [
{
title: "Ave. Journey Distance by Car",
showInLegend: false,
name: "Car",
type: "column",
id: "Car",
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y}'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{}</span>',
pointFormat: '<span>{point.name}</span>: <b>{point.y}</b> of total<br/>'
},
data: [
["Large Truck", 24],
["Medium Truck", 17],
["Mid-Sized", 8],
["Car", 10]
]
},
{
title: "Ave. Journey Distance by Car",
showInLegend: false,
name: "Car",
type: "spline",
id: "Car",
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y}'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{}</span>',
pointFormat: '<span>{point.name}</span>: <b>{point.y}</b> of total<br/>'
},
data: [
["Large Truck", 22],
["Medium Truck", 15],
["Mid-Sized", 6],
["Car", 8]
]
},
{
title: "Ave. Journey Distance by Mid-Sized",
name: "Mid-Sized",
showInLegend: false,
type: "column",
id: "Mid-Sized",
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y}'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{}</span>',
pointFormat: '<span>{point.name}</span>: <b>{point.y}</b> of total<br/>'
},
data: [
["Large Truck", 24],
["Medium Truck", 17],
["Mid-Sized", 8],
["Car", 10]
]
},
{
title: "Ave. Journey Distance by Medium Truck",
name: "Medium Truck",
showInLegend: false,
type: "column",
id: "Medium Truck",
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y}'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{}</span>',
pointFormat: '<span>{point.name}</span>: <b>{point.y}</b> of total<br/>'
},
data: [
["Large Truck", 24],
["Medium Truck", 17],
["Mid-Sized", 8],
["Car", 10]
]
},
{
title: "Ave. Journey Distance by Large Truck",
name: "Large Truck",
showInLegend: false,
type: "column",
id: "Large Truck",
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y}'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{}</span>',
pointFormat: '<span>{point.name}</span>: <b>{point.y}</b> of total<br/>'
},
data: [
["Large Truck", 24],
["Medium Truck", 17],
["Mid-Sized", 8],
["Car", 10],
]
}
]
}
// ... more options
});
});