堆叠条形图 + Highcharts 中所选系列的边框
Border on selected series in Stacked Bar charts + High Charts
我正在使用 High 图表来呈现堆积条形图。
如何在用户点击特定系列时获得 堆积条形图 的边框?我尝试了 marker 选项,但它只选择了一个系列,但我希望选择整个系列。
目前我是这样的:-
但是,我想要这样:-
您可以使用渲染器在后台添加这样的矩形:http://jsfiddle.net/3Utat/25/
mouseOver: function () {
var chart = this.series.chart,
r = chart.renderer,
shape = this.shapeArgs, // shape args for the points rect element
xAxis = this.series.xAxis,
yAxis = this.series.yAxis,
y = yAxis.toPixels(this.total), // top left y-position of the rect
x = this.plotX + chart.plotLeft - shape.width / 2, // point position + left offset + half width
height = yAxis.toPixels(yAxis.min) - y; // bottom - top
if (chart.hoverStack) {
chart.hoverStack.destroy();
}
chart.hoverStack = r.rect(x, y, shape.width, height).attr({
'stroke-width': 6, //border width
'stroke': 'black', //border color
'fill': 'transparent' //transparent fill color
}).add();
},
mouseOut: function () {
if (this.series.chart.hoverStack) {
this.series.chart.hoverStack.destroy();
this.series.chart.hoverStack = false;
}
}
示例使用 mouseOver
和 mouseOut
事件,但在您的情况下,您可以改用 click
事件。
根据 Pawel 的建议,所选边框的正确 Fiddle
堆积条形图是:-
click: function () {
var chart = this.series.chart,
r = chart.renderer,
shape = this.shapeArgs,
xAxis = this.series.xAxis,
yAxis = this.series.yAxis,
y = yAxis.toPixels(this.total),
x = this.plotX - shape.width / 2,
height = Math.abs(yAxis.toPixels(yAxis.min) - y);
if (chart.hoverStack) {
chart.hoverStack.destroy();
}
chart.hoverStack = r.rect(x, chart.plotWidth+chart.plotLeft-y, shape.width, height).attr({
'stroke-width': 6,
'stroke': 'black',
fill: 'transparent',
transform: 'translate(' + (chart.plotWidth+chart.plotLeft) + ' ' + (chart.plotHeight+chart.plotTop) + ' ) rotate(90) scale(-1,1)'
}).add();
}
我正在使用 High 图表来呈现堆积条形图。
如何在用户点击特定系列时获得 堆积条形图 的边框?我尝试了 marker 选项,但它只选择了一个系列,但我希望选择整个系列。
目前我是这样的:-
但是,我想要这样:-
您可以使用渲染器在后台添加这样的矩形:http://jsfiddle.net/3Utat/25/
mouseOver: function () {
var chart = this.series.chart,
r = chart.renderer,
shape = this.shapeArgs, // shape args for the points rect element
xAxis = this.series.xAxis,
yAxis = this.series.yAxis,
y = yAxis.toPixels(this.total), // top left y-position of the rect
x = this.plotX + chart.plotLeft - shape.width / 2, // point position + left offset + half width
height = yAxis.toPixels(yAxis.min) - y; // bottom - top
if (chart.hoverStack) {
chart.hoverStack.destroy();
}
chart.hoverStack = r.rect(x, y, shape.width, height).attr({
'stroke-width': 6, //border width
'stroke': 'black', //border color
'fill': 'transparent' //transparent fill color
}).add();
},
mouseOut: function () {
if (this.series.chart.hoverStack) {
this.series.chart.hoverStack.destroy();
this.series.chart.hoverStack = false;
}
}
示例使用 mouseOver
和 mouseOut
事件,但在您的情况下,您可以改用 click
事件。
根据 Pawel 的建议,所选边框的正确 Fiddle 堆积条形图是:-
click: function () {
var chart = this.series.chart,
r = chart.renderer,
shape = this.shapeArgs,
xAxis = this.series.xAxis,
yAxis = this.series.yAxis,
y = yAxis.toPixels(this.total),
x = this.plotX - shape.width / 2,
height = Math.abs(yAxis.toPixels(yAxis.min) - y);
if (chart.hoverStack) {
chart.hoverStack.destroy();
}
chart.hoverStack = r.rect(x, chart.plotWidth+chart.plotLeft-y, shape.width, height).attr({
'stroke-width': 6,
'stroke': 'black',
fill: 'transparent',
transform: 'translate(' + (chart.plotWidth+chart.plotLeft) + ' ' + (chart.plotHeight+chart.plotTop) + ' ) rotate(90) scale(-1,1)'
}).add();
}