我正在尝试使用带有堆叠列的Highcharts创建详细信息图表 问题是当您在主图表上选择所需的范围时，它只会影响堆叠列的1个部分。
一般来说，我对编程很陌生，无处不在我想到的解决方案，所以任何帮助都会受到大力赞赏。
这里问题的JSFiddle演示： http://jsfiddle.net/jp3qpfyw/
代码的highcharts部分（数据/系列数组替换为通用数字）：
$(function () {
var data = [0.8446, 0.8445, 0.8444, 0.8451, 0.8418, 0.8264, 0.8258, 0.8232, 0.8233, 0.8258,
0.8283, 0.8278, 0.8256, 0.8292, 0.8239, 0.8239, 0.8245, 0.8265, 0.8261, 0.8269,
0.8273, 0.8244, 0.8244, 0.8172, 0.8139, 0.8146, 0.8164, 0.82, 0.8269, 0.8269];
var masterChart,
detailChart;
$(document).ready(function() {
// create the master chart
function createMaster() {
masterChart = new Highcharts.Chart({
chart: {
renderTo: 'master-container',
reflow: false,
borderWidth: 0,
backgroundColor: null,
marginLeft: 50,
marginRight: 20,
zoomType: 'x',
events: {
// listen to the selection event on the master chart to update the
// extremes of the detail chart
selection: function(event) {
var extremesObject = event.xAxis[0],
min = extremesObject.min,
max = extremesObject.max,
detailData = [],
xAxis = this.xAxis[0];
// reverse engineer the last part of the data
jQuery.each(this.series[0].data, function(i, point) {
if (point.x > min && point.x < max) {
detailData.push({
x: point.x,
y: point.y
});
}
});
// move the plot bands to reflect the new detail span
xAxis.removePlotBand('mask-before');
xAxis.addPlotBand({
id: 'mask-before',
from: -0.5,
to: min,
color: 'rgba(0, 0, 0, 0.2)'
});
xAxis.removePlotBand('mask-after');
xAxis.addPlotBand({
id: 'mask-after',
from: max,
to: 30.5,
color: 'rgba(0, 0, 0, 0.2)'
});
detailChart.series[0].setData(detailData);
return false;
}
}
},
title: {
text: null
},
xAxis: {
categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]
},
yAxis: {
gridLineWidth: 0,
labels: {
enabled: false
},
title: {
enabled: false
},
},
tooltip: {
enabled: false
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
type: 'column',
data: data
}],
}, function(masterChart) {
createDetail(masterChart)
});
}
// create the detail chart
function createDetail(masterChart) {
var detailData = [];
jQuery.each(masterChart.series[0].data, function(i, point) {
detailData.push(point.y);
});
detailChart = new Highcharts.Chart({
chart: {
type: 'column',
marginBottom: 120,
renderTo: 'detail-container',
reflow: false,
marginLeft: 50,
marginRight: 20,
style: {
position: 'absolute'
}
},
credits: {
enabled: false
},
legend: {
enabled: false
},
tooltip: {
enabled: false
},
title: {
text: 'title'
},
xAxis: {
categories:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false
}
}
},
series: [{
name: 'Purchase',
data: [0.8446, 0.8445, 0.8444, 0.8451, 0.8418, 0.8264, 0.8258, 0.8232, 0.8233, 0.8258,
0.8283, 0.8278, 0.8256, 0.8292, 0.8239, 0.8239, 0.8245, 0.8265, 0.8261, 0.8269,
0.8273, 0.8244, 0.8244, 0.8172, 0.8139, 0.8146, 0.8164, 0.82, 0.8269, 0.8269]
}, {
name: 'Records',
data: [0.7901, 0.7898, 0.7879, 0.7886, 0.7858, 0.7814, 0.7825, 0.7826, 0.7826, 0.786,
0.7878, 0.7868, 0.7883, 0.7893, 0.7892, 0.7876, 0.785, 0.787, 0.7873, 0.7901,
0.7936, 0.7939, 0.7938, 0.7956, 0.7975, 0.7978, 0.7972, 0.7995, 0.7995, 0.7994]
}]
});
}
// make the container smaller and add a second container for the master chart
var $container = $('#container')
.css('position', 'relative');
var $detailContainer = $('<div id="detail-container">')
.appendTo($container);
var $masterContainer = $('<div id="master-container">')
.css({ position: 'absolute', top: 300, height: 100, width: '100%' })
.appendTo($container);
// create master and in its callback, create the detail chart
createMaster();
});
});
答案 0 :(得分：0)
您的selection事件处理程序仅更新绑定到主图表的系列。我会重新编写它来调整图表上的最小值/最大值，以便整个事情更新：
selection: function(event) {
var extremesObject = event.xAxis[0],
min = extremesObject.min,
max = extremesObject.max,
xAxis = this.xAxis[0];
var detailXAxis = detailChart.xAxis[0];
detailXAxis.update({ min: min, max: max }); // instead of filtering and setting data, just set min/max
// move the plot bands to reflect the new detail span
xAxis.removePlotBand('mask-before');
xAxis.addPlotBand({
id: 'mask-before',
from: -0.5,
to: min,
color: 'rgba(0, 0, 0, 0.2)'
});
xAxis.removePlotBand('mask-after');
xAxis.addPlotBand({
id: 'mask-after',
from: max,
to: 30.5,
color: 'rgba(0, 0, 0, 0.2)'
});
return false;
}
更新了fiddle。