在Highcharts中设置tooltip.split时，我将工具提示背景设置为其点颜色。
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'spline',
},
title: {
text: 'Mountain house indoor temperatures'
},
subtitle: {
text: 'Split tooltips in Highcharts makes it easier to read overlapping line series'
},
tooltip: {
split: true,
},
xAxis: {
crosshair: {
enabled: true
}
},
yAxis: {
title: {
text: 'Temperatur'
}
},
plotOptions: {
series: {
lineWidth: 1.5,
marker: {
radius: 2
},
events: {
afterAnimate() {
console.log("secondthis", this);
this.tooltipOptions.backgroundColor = this.color
}
}
}
},
data: {
columns: [
["Time", 1451616120000, 1451865660000, 1451952060000, 1452038400000, 1452124800000, 1452211200000, 1452297600000, 1452384000000, 1452470400000, 1452556800000, 1452643200000, 1452729600000, 1452816000000, 1452902400000, 1452988800000, 1453075200000, 1453161600000, 1453248000000, 1453334400000, 1453420800000, 1453507200000, 1453593600000, 1453680000000, 1453766400000, 1453852800000, 1453939200000, 1454025600000],
["Kitchen", 5, 4, 5, 9, 6, 15, 19, 14, 6, 5, 6, 6, 15, 18, 15, 6, 6, 6, 6, 6, 6, 6, 16, 10, 6, 6, 6],
["Living room", 9, 10, 16, 13, 6, 20, 24, 16, 7, 7, 6, 6, 20, 23, 18, 9, 7, 6, 6, 7, 6, 21, 20, 16, 6, 6, 6],
["Hall", 7, 7, 13, 12, 5, 17, 22, 14, 4, 5, 5, 6, 18, 21, 17, 9, 5, 6, 5, 6, 6, 18, 20, 14, 5, 5, 5],
["Bathroom", 7, 7, 13, 12, 5, 17, 22, 14, 4, 5, 5, 6, 18, 21, 17, 9, 5, 6, 5, 6, 6, 18, 20, 14, 5, 5, 5],
["Bedroom 1", 6, 19, 19, 10, 5, 15, 21, 14, 6, 6, 5, 5, 17, 21, 16, 6, 5, 5, 5, 5, 5, 17, 18, 13, 5, 5, 5],
["Bedroom 2", 7, 19, 19, 9, 5, 11, 19, 15, 6, 5, 6, 6, 16, 19, 17, 8, 9, 6, 5, 6, 5, 17, 19, 14, 6, 6, 6],
["Shed", 6, 6, 5, 5, 6, 6, 6, 5, 5, 6, 6, 5, 6, 6, 6, 6, 6, 6, null, null, 6, 6, 6, 6, 6, 6, 6]
]
}
});#container {
max-width: 800px;
height: 400px;
margin: 1em auto;
}<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<div id="container"></div>
我尝试设置事件，但无法正常工作。 我该怎么办？
tooltip: {
split: true,
},
答案 0 :(得分：0)
您可以通过包装Highcharts.Tooltip.prototype.renderSplit方法并在其中添加以下代码行来实现：
pointColor = H.charts[0].options.colors[pick(
point.colorIndex,
series.colorIndex,
'none'
)];
pointColor = pointColor ? pointColor : '#efefef';
pointColor = H.Color(pointColor);
pointColor.rgba[3] = 0.8; // opacity
然后使用pointColor设置特定工具提示元素的填充属性：
if (!chart.styledMode) {
attribs.fill = pointColor.get('rgba');
attribs.stroke = (
options.borderColor ||
point.color ||
series.color ||
'#333333'
);
attribs['stroke-width'] = options.borderWidth;
}
整个包装代码：
(function(H) {
H.Tooltip.prototype.renderSplit = function(labels, points) {
var tooltip = this,
pick = H.pick,
boxes = [],
chart = this.chart,
ren = chart.renderer,
rightAligned = true,
options = this.options,
headerHeight = 0,
headerTop,
tooltipLabel = this.getLabel(),
distributionBoxTop = chart.plotTop;
// Graceful degradation for legacy formatters
if (H.isString(labels)) {
labels = [false, labels];
}
// Create the individual labels for header and points, ignore footer
labels.slice(0, points.length + 1).forEach(function(str, i) {
if (str !== false && str !== '') {
var point = points[i - 1] || {
// Item 0 is the header. Instead of this, we could also
// use the crosshair label
isHeader: true,
plotX: points[0].plotX,
plotY: chart.plotHeight
},
owner = point.series || tooltip,
tt = owner.tt,
series = point.series || {},
colorClass = 'highcharts-color-' + pick(
point.colorIndex,
series.colorIndex,
'none'
),
target,
x,
bBox,
boxWidth,
pointColor,
attribs;
// Store the tooltip referance on the series
if (!tt) {
attribs = {
padding: options.padding,
r: options.borderRadius
};
// CUSTOM COLORS //
pointColor = H.charts[0].options.colors[pick(
point.colorIndex,
series.colorIndex,
'none'
)];
pointColor = pointColor ? pointColor : '#efefef';
pointColor = H.Color(pointColor);
pointColor.rgba[3] = 0.8;
// CUSTOM COLORS //
if (!chart.styledMode) {
attribs.fill = pointColor.get('rgba');
attribs.stroke = (
options.borderColor ||
point.color ||
series.color ||
'#333333'
);
attribs['stroke-width'] = options.borderWidth;
}
owner.tt = tt = ren
.label(
null,
null,
null,
(
point.isHeader ? options.headerShape :
options.shape
) || 'callout',
null,
null,
options.useHTML
)
.addClass('highcharts-tooltip-box ' + colorClass)
.attr(attribs)
.add(tooltipLabel);
}
tt.isActive = true;
tt.attr({
text: str
});
if (!chart.styledMode) {
tt.css(options.style)
.shadow(options.shadow);
}
// Get X position now, so we can move all to the other side in
// case of overflow
bBox = tt.getBBox();
boxWidth = bBox.width + tt.strokeWidth();
if (point.isHeader) {
headerHeight = bBox.height;
if (chart.xAxis[0].opposite) {
headerTop = true;
distributionBoxTop -= headerHeight;
}
x = Math.max(
0, // No left overflow
Math.min(
point.plotX + chart.plotLeft - boxWidth / 2,
// No right overflow (#5794)
chart.chartWidth +
(
// Scrollable plot area
chart.scrollablePixels ?
chart.scrollablePixels - chart.marginRight :
0
) -
boxWidth
)
);
} else {
x = point.plotX + chart.plotLeft -
pick(options.distance, 16) - boxWidth;
}
// If overflow left, we don't use this x in the next loop
if (x < 0) {
rightAligned = false;
}
// Prepare for distribution
target = (point.series && point.series.yAxis &&
point.series.yAxis.pos) + (point.plotY || 0);
target -= distributionBoxTop;
if (point.isHeader) {
target = headerTop ?
-headerHeight :
chart.plotHeight + headerHeight;
}
boxes.push({
target: target,
rank: point.isHeader ? 1 : 0,
size: owner.tt.getBBox().height + 1,
point: point,
x: x,
tt: tt
});
}
});
// Clean previous run (for missing points)
this.cleanSplit();
if (options.positioner) {
boxes.forEach(function(box) {
var boxPosition = options.positioner.call(
tooltip,
box.tt.getBBox().width,
box.size,
box.point
);
box.x = boxPosition.x;
box.align = 0; // 0-align to the top, 1-align to the bottom
box.target = boxPosition.y;
box.rank = pick(boxPosition.rank, box.rank);
});
}
// Distribute and put in place
H.distribute(boxes, chart.plotHeight + headerHeight);
boxes.forEach(function(box) {
var point = box.point,
series = point.series;
// Put the label in place
box.tt.attr({
visibility: box.pos === undefined ? 'hidden' : 'inherit',
x: (rightAligned || point.isHeader || options.positioner ?
box.x :
point.plotX + chart.plotLeft + tooltip.distance),
y: box.pos + distributionBoxTop,
anchorX: point.isHeader ?
point.plotX + chart.plotLeft : point.plotX + series.xAxis.pos,
anchorY: point.isHeader ?
chart.plotTop + chart.plotHeight / 2 : point.plotY + series.yAxis.pos
});
});
}
})(Highcharts);
演示：