我正试图在悬停在传说上时显示工具提示。 Highcharts不具备这样做的功能，因此我认为使用jquery工具提示插件我将能够这样做。该图是使用实时数据动态生成的。添加数据后，将生成系列，同时在“图例”部分中添加系列。可能存在系列名称太大而且会被截断的情况。在这种情况下，我希望在名称上悬停时以工具提示的形式显示整个系列名称。任何人都可以给我任何关于如何去做的建议吗？谢谢， ：） 我的图表代码如下：
var chartConfig = {
chart: {
zoomType: 'x',
marginTop: 24,
borderWidth: 1,
borderRadius: 6,
borderColor: '#ccc',
backgroundColor: '#F5F5F5',
resetZoomButton: {
theme: {
display: 'none'
}
},
events: {
selection: function(event){
if (event.xAxis) {
$scope.zoomStart = Math.floor(event.xAxis[0].min).toString();
$scope.zoomEnd = Math.floor(event.xAxis[0].max).toString();
$scope.zoomed = true;
$scope.$apply();
}
},
load: function(){
console.log("successfully loaded");
console.log(chartConfig.legend.text);
},//load
addSeries: function(){
var chart = this;
legend = chart.legend;
console.log('Series added '+legend.allItems.length);
}
}
},
colors: [
'#a6a8ab', //very light grey - severity 0
'#7bc043', //light green - severity 1
'#6798c7', //blue - severity 2
'#edbe1c', //yellow - severity 3
'#ed6a1c', //Red - severity 4
'#ed1c24', //Dark red - severity 5
'#17A768', //green
'#E7E737', //yellow
'#F1AD1D', //orange
'#F76C27', //darker orange
'#E73F3F', //red
'#781800', //darker red
'#A8A8A8', //grey
'#BBAE93', //yellowish grey
'#EBEFC9', //yellow almost white
'#424242', //dark grey
'#A8C0D8', //bluish grey
'#08050E' //nearly black, slightly purple
],
yAxis: {
min: 0,
title: {
style: {
color: '#6D869F',
fontSize: '12px',
fontWeight: 'normal'
}
},
stackLabels: {
enabled: false
}
},
xAxis: {
type: 'datetime',
title: {
text: $filter('i18n')('_EventTimeLabel_'),
style: {
color: '#6D869F',
fontSize: '12px',
fontWeight: 'normal'
}
},
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '10px',
fontWeight: 'normal'
},
formatter: function() {
return Highcharts.dateFormat('%H:%M:%S', this.value);
}
},
events: {
afterSetExtremes: function(event) {
reloadLegend();
}
}//event ends
},
legend: {
title: {
text: $scope.criteria.eventfieldName
},
layout: 'vertical',
align: 'right',
x: 0,
y: 0,
verticalAlign: 'top',
floating: false,
backgroundColor: 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false,
itemStyle: {
//cursor: 'pointer',
fontSize: '11px'
},
labelFormatter: function() {
// this function populates the legend with a total value over the points
// this makes sense for count, but you can't just add up eps per interval to get a total
// it should probably be an average
// Figure 6 intervals with sev 0 at 1 eps, it would total 6 eps, if divided by 6 intervals = 1
var i, len, total = 0, intervals = 0;
if (this.points) {
// during zoom and on updates
len = this.points.length;
for (i = 0; i < len; i++) {
// limit the data points considered viewable in zoom - not accurate
if (this.points[i].x > this.xAxis.min && this.points[i].x < this.xAxis.max) {
total += this.points[i].y;
intervals++;
}
}
debug.log('labelFormatter points',this.name,total,intervals);
} else {
// seems like only during initial load
len = this.yData.length;
for (i = 0; i < len; i++) {
total += this.yData[i];
intervals++;
}
debug.log('labelFormatter yData',this.name,total,intervals);
}
var precision = 0;
if ($scope.modalData.countType === 'Event Count per Second') {
if (intervals < 1) {
//ensure no divide by zero
intervals = 1;
}
total = total/intervals;
precision = Math.floor(Math.log($scope.displayIntervalTime * intervals)/Math.log(10))-2;
}
var nameLabel = this.name;
if (nameLabel === highCardinalitySelector) {
nameLabel = otherLabel;
}
return truncateLegend(nameLabel,16)+'(' + total.toFixed(precision) + ')';
},
itemMarginTop: 2,
enabled: $scope.legendEnabled
},
tooltip: {
formatter: function() {
var content;
content = '<strong>'+ $filter('i18n')('_EventTimeLabel_') +':</strong> ' + Highcharts.dateFormat('%H:%M:%S', this.x) + '<br/>';
var nameLabel = this.series.name;
if (nameLabel === highCardinalitySelector) {
nameLabel = otherLabel;
}
content += '<strong>' + $scope.criteria.eventfieldName + ':</strong> ' + nameLabel + '<br/><strong>' + eventCountTypeLabel + ':</strong> ' + this.y.toFixed(decimals) + '<br/>';
if ($scope.modalData.chartType == 'Stacked Bar 2D') {
content += '<strong>'+ $filter('i18n')('_TotalLabel_') +':</strong> ' + this.point.stackTotal.toFixed(decimals) + '<br/>';
}
return content;
},
style: {
color: '#333',
fontSize: '11px',
padding: '8px'
},
borderColor: '#CCC',
followPointer: true
},
series: series,
title: '',
exporting: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
var searchStr = '(' + $scope.criteria.filter + ')';
// Add on the tenant filter if selected for view by default tenant
if($scope.activeview.tenant) {
searchStr += ' AND (rv39:"' + $filter('escChars')($scope.activeview.tenant) +'")';
}
if ($scope.legendEnabled) {
// the null entry has been selected
if(this.series.name == nullString) {
searchStr += ' AND NOT (notnull:' + $scope.criteria.eventfield + ')';
} else if(this.series.name != highCardinalitySelector) {
// a non-null entry has been selected
searchStr += ' AND (' + $scope.criteria.eventfield + ':"' + $filter('escChars')(this.series.name) + '")';
} else {
//the other entry '*' has been selected
var excludeStr = '';
var hasNullMember = false;
for(i=0;i<series.length;i++) {
if(series[i].name == nullString)
{
hasNullMember = true;
} else if (series[i].name != highCardinalitySelector) {
excludeStr += $scope.criteria.eventfield + ':"' + $filter('escChars')(series[i].name) + '" ';
}
}
// exclude the ones we know and the null ones if they exist
searchStr += ' AND NOT (' + excludeStr + ')';
if (hasNullMember) {
searchStr += ' AND notnull:' + $scope.criteria.eventfield;
}
}
}
debug.log(searchStr);
$scope.launchSearch(searchStr, this.x.toString(), (this.x + $scope.displayIntervalTime).toString());
}
}
}
}
}
};
悬停部分：
var redrawChart = function() {
console.log("Redraw function working");
var chart = $element.find('.highcharts').highcharts(); //this could be better
if (chart) {
chart.redraw();
legend=chart.legend;
for (var i = 0, len = legend.allItems.length; i < len; i++) {
(function(i) {
var item = legend.allItems[i].legendItem;
item.on('mouseover', function (e) {
//show custom tooltip here
console.log("mouseover-" + chart.series[i].name);
chart.tooltip.refresh(chart.series[i].data[i]);
//$element(".tooltip[data-series='" + chart.series[i].name + "']"+"saloni").css({left:event.clientX, top:event.clientY}).show();
// chart.tooltip.refresh("its working");
}).on('mouseout', function (e) {
//hide tooltip
console.log("mouseout" + chart.series[i].name);
// chart.tooltip.hide();
});
})(i);
}//for loop
}
debug.log('chart redraw:', chart?'yes':'no');
};
所以徘徊正如我所希望的那样。我已设法在控制台中显示它。但棘手的部分是以工具提示形式显示它。如何生成工具提示框，使其显示在图例旁边？
答案 0 :(得分：1)
一个更简单的解决方案已经在SO上了，请参阅下面的代码，并在this fiddle
引用现有的小提琴
<select id="ddlDropDown">
<option value="text1">Some text</option>
<option value="text2">Some text</option>
<option value="text3">Some text</option>
<option value="text11">Some text</option>
<option value="text21">Some text</option>
<option value="text31">Some text</option>
</select>
<input type="textbox" id="x">
<p></p>