我的钻取工作正常，但我不知道如何让我的钻取图表标题以“YYYY-MM-DD 的销售额”格式显示钻取点 x 值（日期时间）。
回到最初的图表标题“销售”（在钻取事件中）效果很好。
$(function () {
Highcharts.setOptions({
global: {
useUTC: false,
timeZoneOffset: -180
},
lang: {
drillUpText: ' < Back '
}
});
// Create the chart
$('#container').highcharts({
credits: {
enabled: false
},
xAxis: [{
id: 0,
minorTickLength: 0,
labels: {
y: 15,
format: '{value:%e %b}',
zIndex: 0
},
tickPixelInterval: 10,
tickWidth: 0,
title: {
text: null
},
tickColor: '#e0e0e0',
pointPadding: 0.05,
tickmarkPlacement: 'on',
type: 'datetime'
},{
id: 1,
minorTickLength: 0,
labels: {
y: 15,
zIndex: 0
},
tickPixelInterval: 2,
tickWidth: 0,
title: {
text: null
},
tickColor: '#e0e0e0',
pointPadding: 0.2,
tickmarkPlacement: 'on',
type: 'category',
lineWidth: 0
}],
yAxis: {
gridLineWidth: 0,
gridLineColor: '#e0e0e0',
labels: {
y: 0,
x: 0,
overflow: 'justify',
enabled: false,
maxStaggerLines: 0,
align: 'center'
},
title: {
margin: 0,
text: null
},
gridLineInterpolation: null
},
tooltip: {
enabled: false,
shared: true,
xDateFormat: '%e %b',
valueSuffix: ' Lt',
borderColor: 'null',
borderRadius: 10
},
plotOptions: {
areaspline: {
lineColor: '#c0c0c0',
marker: {
enabled: false,
fillColor: '#e0e0e0',
radius: 3,
lineWidth: 1,
lineColor: '#c0c0c0'
},
lineWidth: 1,
states: {
hover: {
marker: {
radius: 3,
lineWidth: 1
}
}
}
},
column: {
allowPointSelect: false,
cursor: 'pointer',
dataLabels: {
enabled: true,
inside: false,
overflow: 'none',
y: -10,
x: 0,
verticalAlign: 'middle',
padding: 0,
}
}
},
chart: {
events: {
drilldown: function(){
UpdateTitle('Sales of '+this)
},
drillup: function(){
UpdateTitle('Sales')
}
},
spacingBottom: 20,
type: 'column',
borderRadius: 2,
spacingTop: 0,
width: 1012,
marginLeft: 0,
pacingRight: 0,
marginBottom: 40,
marginRight: 0,
marginTop: 20,
height: 180,
spacingLeft: 0
},
title: {
margin: 10,
y: 15,
text: 'Sales',
x: 20,
align: 'left',
},
Exporting: {
scale: 1,
buttons: {
contextButton: {
enabled: false
}
},
enabled: false
},
legend: {
enabled: false,
symbolWidth: 12
},
series: [ {
index: 1,
type: 'column',
color: '#30bf09',
name: 'Sales',
data: [{
x: 1399410000000,
y: 16675,
drilldown: 'day01'
},{
x: 1399496400000,
y: 6906,
drilldown: 'day02'
},{
x: 1399582800000,
y: 5290,
drilldown: 'day03'
},{
x: 1399669200000,
y: 764,
drilldown: 'day04'
},{
x: 1399755600000,
y: 248,
drilldown: 'day05'
},{
x: 1399842000000,
y: 8585,
drilldown: 'day06'
},{
x: 1399928400000,
y: 5176,
drilldown: 'day07'
},{
x: 1400014800000,
y: 10836,
drilldown: 'day08'
},{
x: 1400101200000,
y: 13217,
drilldown: 'day09'
},{
x: 1400187600000,
y: 7213,
drilldown: 'day10'
},{
x: 1400274000000,
y: 711,
drilldown: 'day11'
},{
x: 1400360400000,
y: 1038,
drilldown: 'day12'
},{
x: 1400446800000,
y: 6612,
drilldown: 'day13'
},{
x: 1400533200000,
y: 14496,
drilldown: 'day14'
}]
},{
index: 0,
type: 'areaspline',
color: '#e0e0e0',
name: 'Planas',
data: [
[1399410000000, 2930],
[1399496400000, 2930],
[1399582800000, 2930],
[1399669200000, 0],
[1399755600000, 0],
[1399842000000, 2930],
[1399928400000, 2930],
[1400014800000, 2930],
[1400101200000, 2930],
[1400187600000, 2930],
[1400274000000, 0],
[1400360400000, 0],
[1400446800000, 2930],
[1400533200000, 2930]
]
}],
drilldown: {
activeAxisLabelStyle: {
textDecoration: 'none',
fontWeight: 'regular',
color: '7f7f7f'
},
activeDataLabelStyle: {
textDecoration: 'none',
fontWeight: 'semi-bold',
color: '4c4c4c'
},
drillUpButton: {
relativeTo: 'spacingBox',
position: {
align: 'right',
x: 0,
y: 0,
verticalAlign: 'top'
}
},
series: [{
id: 'day01',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Presta', 2000],
['Export', 600],
['ESET', 75],
['SoftMak', 75],
['Google', 750],
['Blancco', 0],
['Axence', 200],
['Kiti', 1500],
['...', 0],
['...', 0],
['Box', 550],
['Nuoma', 75]
]
},{
id: 'day02',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftM', 75],
[ , ],
[ , ],
[ , ],
[ , ],
[ , ],
[ , ],
[ , ],
[ , ],
[ , ]
]
},{
id: 'day03',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75]
]
},{
id: 'day04',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75]
]
},{
id: 'day05',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75]
]
},{
id: 'day06',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75]
]
},{
id: 'day07',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75]
]
},{
id: 'day08',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75]
]
},{
id: 'day09',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75]
]
},{
id: 'day10',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75]
]
},{
id: 'day11',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75]
]
},{
id: 'day12',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75]
]
},{
id: 'day13',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75]
]
},{
id: 'day14',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75],
[ , ],
[ , ],
[ , ],
[ , ],
[ , ],
[ , ],
[ , ],
[ , ],
[ , ]
]}
]
}
})
var chart = $('#container').highcharts();
function UpdateTitle(argument1) {
chart.setTitle({text: argument1})
}