Мое требование состоит в том, чтобы показать div, содержащий цвета каждого кусочка пирога при наведении курсора мыши на субтитры круговой диаграммы. Я использую highchart.js. Как добиться этого. Пожалуйста помоги.Как включить наведение мыши на субтитры или название круговой диаграммы с использованием highchart
Please find the attached image for mor information
Вы должны приложить MouseEnter события на субтитры/названии. Вы можете сделать это при загрузке. Затем вы должны создать div, который содержит всю информацию и стили.
chart: {
events: {
load: function() {
const menu = document.createElement('div');
menu.style.cssText = 'left:' + (this.plotLeft + this.plotWidth * 0.5) + 'px; top:' + (this.plotTop + this.plotHeight * 0.1) + 'px; position: absolute; display: none; background-color:white; padding: 20px';
let str = '';
this.series[0].data.forEach(point => {
str += '<p><div style="display:inline-block;padding-right: 10px;width:10px;height:10px;background-color:' + point.color + ';background-clip:content-box;"></div>' + point.name + '</p>'
});
str += '';
menu.innerHTML = str;
this.renderTo.appendChild(menu);
this.subtitle.on('mouseenter', function(e) {
menu.style.display = 'block';
})
}
}
},
пример: http://jsfiddle.net/farucbbu/
Используйте подсказки варианта.
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
backgroundColor: '#FCFFC5',
borderColor: 'black',
borderRadius: 10,
borderWidth: 3
}
Для получения дополнительной информации перейдите к http://www.highcharts.com/docs/chart-concepts/tooltip
Мое требование, чтобы показать всплывающую подсказку при наведении на «View All Label», который подзаголовок в прилагаемом изображении –
Спасибо Вам это то, что я хотел. Но я не могу получить значение для this.series [0] .data.forEach (point => {, .... this.series [0] дает мне неопределенное, когда я проверял в консоли. Какая проблема –
Загрузили ли какие-либо сериалы на график? Проверьте, что это значит внутри обратного вызова. – morganfree
В моем примере скрипта найдите мой код: http://jsfiddle.net/j43sr6hk/1/ и любезно предложите мне, куда я иду Я загружаю ряд динамически, используя метод chart.addSeries ({...}). –