英文:
Highcharts Tooltip - Getting rid of the marker dot?
问题
我想要去掉工具提示框中左上角的小点。我正在使用Highcharts。您可以帮助我修改这个功能吗，这是我的代码：
tooltip: {
useHTML: true,
pointFormat: '{point.name} <br> <div style="display: inline-block;" class="square-answer1-globe"></div>{{question["answer1"]}}: {point.value1}% <br> <div style="display: inline-block;" class="square-answer2-globe"></div>{{question["answer2"]}}: {point.value2}%',
backgroundColor: 'black',
style: {
color: 'white'
},
}
要去掉工具提示框中的小点，您可以在tooltip对象中添加"marker"属性，并将其设置为false，如下所示：
tooltip: {
useHTML: true,
pointFormat: '{point.name} <br> <div style="display: inline-block;" class="square-answer1-globe"></div>{{question["answer1"]}}: {point.value1}% <br> <div style="display: inline-block;" class="square-answer2-globe"></div>{{question["answer2"]}}: {point.value2}%',
backgroundColor: 'black',
style: {
color: 'white'
},
marker: false // 添加这一行
}
这将禁用工具提示框中的小点。
英文:
I would like to get rid of the small dot in my tooltip display. I am using High-charts. I Can you please help in modifying this feature, here is my code:
Highcharts.getJSON(
'https://code.highcharts.com/mapdata/custom/world.topo.json',
topology => {
const chart = Highcharts.mapChart('container', {
chart: {
map: topology
},
title: {
text: ''
},
legend: {
enabled: false,
align: 'center',
verticalAlign: 'bottom',
itemStyle: {
fontWeight: 'bold',
fontSize: '20px'
}
},
mapNavigation: {
enabled: true,
enableDoubleClickZoomTo: true,
buttonOptions: {
align: 'right',
verticalAlign: 'bottom'
}
},
mapView: {
maxZoom: 30,
projection: {
name: 'Orthographic',
rotation: [60, -30]
}
},
colorAxis: {
min: 0,
max: 100,
text: '',
stops: [[0, 'darkgrey', ''], [0, '#5ce1e6', '{{question['answer1']}}'], [0.49, '#c9f5f7', ''], [.50, '#aee0a0', ''], [.51, '#fff4c8', ''], [1, '#ffde59', '{{question['answer2']}}']],
title: {
text: '',
},
},
credits: {
enabled: false
},
tooltip: {
useHTML: true,
pointFormat: '{point.name} <br> <div style="display: inline-block;" class="square-answer1-globe"></div>{{question["answer1"]}}: {point.value1}% <br> <div style="display: inline-block;" class="square-answer2-globe"></div>{{question["answer2"]}}: {point.value2}%',
backgroundColor: 'black',
style: {
color: 'white'
},
},
plotOptions: {
series: {
animation: {
duration: 750
},
clip: false
}
},
mapline: {
color: Highcharts.getOptions().colors[0]
},
series: [{
name: 'Graticule',
id: 'graticule',
type: 'mapline',
data: getGraticule(),
nullColor: 'lightgrey',
color: 'lightgrey',
accessibility: {
enabled: false
},
enableMouseTracking: false
},
{
data,
joinBy: 'name',
name: '',
states: {
hover: {
color: '',
borderColor: '#000000'
}
},
accessibility: {
exposeAsGroupOnly: true
}
}]
});
Here is an image of what is displayed: enter image description here
I want to get rid of the little dot in the top left of the tooltip box. I have been trying everything and it always seems to appear there. I have tried adding in "Marker: false", but maybe I am not inputting it in the correct spot (not sure if this is the correct code).
答案1
得分: 1
你可以使用 formatter 选项来设置工具提示，类似于这样，但要添加你自己的数值：
tooltip: {
formatter: function(tooltip) {
return `${question1}: <b>${percentage1}</b><br/>`
}
},
这里有关于它的文档：https://api.highcharts.com/highcharts/tooltip.formatter
英文:
You can use formatter option for the tooltip, something like this, but add your values:
tooltip: {
formatter: function(tooltip) {
return `${question1}: <b>${percentage1}</b><br/>`
}
},
Here is documentation about it: https://api.highcharts.com/highcharts/tooltip.formatter
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论