我在我的代码中使用了 Highchart 的事件量表。它工作得很好。我的需求是当图表上没有轨道悬停时，我想显示图表内半径内所有轨道值的总和。
这是我的函数，它在向图表提供数据时显示图表。
function ShowProgramActivityChart(graphData) {
var parsedInformation;
if (graphData == "") {
parsedInformation = "";
} else {
parsedInformation = JSON.parse(graphData);
for (counter = 0; counter < parsedInformation.activities.length; counter++) {
var trackData = parsedInformation.activities[counter].data;
trackData = "[" + trackData + "]";
trackData = JSON.parse(trackData);
parsedInformation.activities[counter].data = trackData;
}
}
Highcharts.chart('container', {
chart: {
type: 'solidgauge',
height: '401px',
//height: '110%',
events: {
render: (parsedInformation != "") ? renderIcons : empty
}
},
title: {
text: 'Monthly Activity Report',
style: {
//fontSize: '24px'
}
},
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '12px'
},
pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}h</span>',
positioner: function (labelWidth) {
return {
x: (this.chart.chartWidth - labelWidth) / 2,
y: (this.chart.plotHeight / 2) + 15
};
}
},
credits: {
enabled: false
},
pane: {
startAngle: 0,
endAngle: 360,
background: (parsedInformation == "") ? [] : parsedInformation.tracks
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: []
},
exporting: { enabled: false },
plotOptions: {
solidgauge: {
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false,
rounded: true
}
},
series: (parsedInformation == "") ? [] : parsedInformation.activities
});
$('#container .highcharts-no-data text').text('No Activity Performed');
}
而renderIcons函数如下:
function renderIcons() {
var chart = $('#container').highcharts(),
point = chart.series[0].points[0];
point.onMouseOver(); // Show the hover marker
console.log(chart);
console.log(point);
chart.tooltip.refresh(point); // Show the tooltip
chart.tooltip.hide = function () { console.log() };
}
这是我目前的结果图片
我想设置第二张图片中突出显示的区域的值。
在@Deep3015提供的代码之后，下面是代码中添加的两个函数。
function BindMouseOutOnInnerRadius() {
var sum = 0;
this.chart.series.map(function (item) {
sum = sum + item.data[0].y
})
console.log(sum)
chart = this.chart;
if (!chart.lbl) {
chart.lbl = chart.renderer.label('', (this.chart.chartWidth - 80) / 2, (this.chart.plotHeight / 2) + 15)
.attr({
padding: 10,
r: 10,
})
.css({
color: '#000',
fontSize: 20
})
.add();
}
setTimeout(function () {
chart.lbl
.show()
.attr({
text: '<span style="fontt-size:10px">Activity</span> <br><br>' + sum
});
}, 900)
}
和
function LoadInnerRadiusValue() {
var sum = 0;
this.series.map(function (item) {
sum = sum + item.data[0].y
});
//console.log(sum);
chart = this;
if (!chart.lbl) {
chart.lbl = chart.renderer.label('', (this.chartWidth - 80) / 2, (this.plotHeight / 2) + 15)
.attr({
padding: 10,
r: 10,
})
.css({
color: '#000',
fontSize: 20
})
.add();
}
chart.lbl
.show()
.attr({
text: '<span style="fontt-size:10px">Total Hours</span> <br><br>' + sum + 'h'
});
}
这里是添加的加载事件
chart: {
type: 'solidgauge',
height: '401px',
//height: '110%',
events: {
render: (parsedInformation != "") ? renderIcons : empty,
load: LoadInnerRadiusValue
}
并且添加了另一个带有鼠标移出事件的系列部分
series: {
events: {
mouseOut: function() { BindMouseOutOnInnerRadius() }
}
}
当我注释掉这段代码时
formatter: function () {
var chart = this.series.chart;
if (chart.lbl) {
chart.lbl.hide();
}
return this.series.name + '<br><span style="font-size:2em; color: {point.color}; font-weight: bold">' + this.y + 'h</span>'
}
由@Deep3015 提供。显示总和值但未触发鼠标移出事件，因此总和值不会隐藏。当我的图表中有“格式化程序”部分时。内径的和值不出现。
我感谢@Deep3015 为我指明正确方向所做的努力。
最佳答案
我设法通过在工具提示格式化程序函数中使用 setTimeout 函数来解决重叠问题。
fiddle演示
工具提示格式化程序
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
followPointer:false,
hideDelay: 0,
shadow: false,
style: {
fontSize: '16px'
},
useHTML:true,
formatter: function() {
var chart = this.series.chart;
setTimeout(()=>{if (chart.lbl) {
chart.lbl.hide();
}},1)
return this.series.name + '<br><span style="font-size:2em; color:'+this.color+'; font-weight: bold">' + this.y + '</span>'
},
positioner: function(labelWidth) {
return {
x: (this.chart.chartWidth - labelWidth) / 2,
y: (this.chart.plotHeight / 2) + 15
};
}
},
绘图选项
plotOptions: {
solidgauge: {
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false,
rounded: true
},
series: {
point: {
events: {
mouseOver: function() {
var chart = this.series.chart;
if (chart.lbl) {
chart.lbl.hide();
console.log(chart.lbl)
}
}
}
},
events: {
mouseOut: function() {
let sum = 0;
this.chart.series.map((el) => {
sum += el.data[0].y
})
chart = this.chart;
if (!chart.lbl) {
chart.lbl = chart.renderer.label('', (this.chart.chartWidth - 80) / 2, (this.chart.plotHeight / 2) + 15)
.attr({
padding: 10,
r: 10,
})
.css({
color: '#000',
fontSize: 20
})
.add();
}
setTimeout(function() {
chart.lbl
.show()
.attr({
text: '<span style="font-size:.8em">Activity</span><br> <span style="font-weight:bold;font-size:1.4em;color:#ff9933">' + sum+'</span>',
});
}, 0)
}
}
}
},
关于javascript - 渲染时显示事件量表内半径中的轨迹值总和，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48145439/