gpt4 book ai didi

javascript - 始终在 Highcharts 中的所有列上显示工具提示

转载 作者:行者123 更新时间:2023-11-29 10:09:08 25 4
gpt4 key购买 nike

这是一个柱形图 - https://jsfiddle.net/kx8qqh2e/

当您将鼠标悬停在列上时,它会显示一个漂亮的工具提示。我想始终在所有列上显示工具提示,而无需用户将鼠标悬停在它们上面。我怎样才能做到这一点?

var chart_data;
chart_data = {
chart: {
type: 'column',
backgroundColor: '#FBFBFB',
plotBackgroundColor: '#FBFBFB'
},
title: {
text: '<b>Category-Wise APF</b>',
verticalAlign: 'bottom',
useHTML: true,
style: {
color: '#454545',
fontSize: '14px'
},
y: 13
},
xAxis: {
type: 'category'
},
yAxis: {
labels: {
enabled: false
},
title: '',
gridLineColor: '#EFEFEF'
},
credits: {
enabled: false
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '<b>{point.y}</b>'
},
series: [
{
colorByPoint: true,
data: [
{
name: 'Sports & Fitness',
y: 1.34,
color: '#2E91A4'
}, {
name: 'Fashion Apparels',
y: 1.29,
color: '#3196A5'
}, {
name: 'Women\'s Clothing',
y: 1.24,
color: '#2F9BA6'
}, {
name: 'Footwear',
y: 1.23,
color: '#319FA7'
}, {
name: 'Clothing & Apparels',
y: 1.21,
color: '#34A3A8'
}, {
name: 'Audio Equipments',
y: 1.20,
color: '#36A3A8'
}, {
name: 'Home Decor',
y: 1.13,
color: '#38ADAA'
}, {
name: 'Health & Personal Care',
y: 1.12,
color: '#38B1AB'
}, {
name: 'Mobile Accessories',
y: 1.12,
color: '#39B7AB'
}, {
name: 'Computer Accessories',
y: 1.11,
color: '#3DBBAD'
}
]
}
]
};
$('#categorywise-apf-graph').highcharts(chart_data);

最佳答案

为了清晰和后代:

您可以关闭标准的tooltip,并使用dataLabels 来实现您的目标。

tooltip: { 
enabled: false,
crosshairs: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
}

默认情况下,带有列 y 值的小标签将放置在列上方。

您可以使用广泛的配置选项和 formatter 功能,以多种方式自定义此标签,使其更像标准的 tooltip

dataLabel 的高度自定义版本示例:

代码:

plotOptions: {
series: {
dataLabels: {
enabled: true,
inside: false,
overflow: 'none',
crop: true,
shape: 'callout',
backgroundColor:'rgba(0,0,0,0.8)',
borderColor: 'rgba(0,0,0,0.9)',
color: 'rgba(255,255,255,0.75)',
borderWidth: .5,
borderRadius: 5,
y: -10,
style: {
fontFamily: 'Helvetica, sans-serif',
fontSize: '10px',
fontWeight: 'normal',
textShadow: 'none'
},
formatter: function() {
return '<strong>'+this.series.name+'</strong>'
+'<br/>Group: <strong>'+ this.x+'</strong>'
+'<br/>Value: <strong>'+ Highcharts.numberFormat(this.y,0)+'</strong>';
}
}
}
},

fiddle :

输出:

screenshot

[{ 编辑 --

而且,由于像这样的大标签可能会分散注意力,而您真正想做的只是查看绘制的数据,所以这里有一个带有按钮的版本,可以切换标签的可见性:

fiddle :

代码:

<button id="toggle">Toggle Data Labels</button>
$('#toggle').click(function() {
var enabled = chart.series[0].options.dataLabels.enabled;
console.log(enabled);
chart.series[0].update({ dataLabels: { enabled: !enabled }});
});

--/EDIT }]

关于javascript - 始终在 Highcharts 中的所有列上显示工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36906464/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com