Я пытаюсь отобразить общее количество пользователей на круговой диаграмме. Но мое «получение общего кода» не работает. Он ничего не отображает.
Вот код, который я использую:
events: {
load: function(event) {
var total = 0;
for(var i=0, len=this.series[0].yData.length; i<len; i++){
total += this.series[0].yData[i];
}
var text = this.renderer.text(
'Total: ' + total,
this.plotLeft,
this.plotTop - 20
).attr({
zIndex: 5
}).add()
}
}
Если я могу показать вам свой полный код, вот он:
var data = <?php echo $data ; ?>
data.forEach(function(el) {
el.name = el.label;
el.y = Number(el.value);
});
Highcharts.chart('pieDiv', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
events: {
load: function(event) {
var total = 0;
for(var i=0, len=this.series[0].yData.length; i<len; i++){
total += this.series[0].yData[i];
}
var text = this.renderer.text(
'Total: ' + total,
this.plotLeft,
this.plotTop - 20
).attr({
zIndex: 5
}).add()
}
}
},
title: {
text: undefined
},
credits: {
enabled: false
},
exporting: { enabled: false } ,
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b> ({point.y}
Users)'
},
plotOptions: {
pie: {
colors:
Highcharts.map(["#59deed","#e86e65","#de8f14","#589bcf","#a05195","#35cc95",
"#72a7b3"], function (color) {
return {
radialGradient: {
cx: 0.5,
cy: 0.3,
r: 0.7
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
}),
states: {
inactive: {
opacity: 1
}
},
allowPointSelect: true,
cursor: 'pointer',
fillOpacity: 1,
showInLegend: true,
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} % <br/>
({point.y} Users)',
style: {
color: (Highcharts.theme &&
Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Users',
colorByPoint: true,
data: data
}]
});
Я могу получить данные на круговой диаграмме. но итог не отображается. Предполагалось, что он появится в верхнем левом углу коробки.
все хорошо. это в файле php. и его работа. Я только что отредактировал эту часть вопроса для своей цели. Мне нужно знать о коде, который отвечает за отображение общих данных в окне диаграммы. О чем я упомянул отдельно



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вы сделали простую ошибку в js для кода цикла, используя , вместо ;. Проверьте код и рабочую демонстрацию с правильным отображением всех данных.
Код:
chart: {
events: {
load: function() {
var total = 0,
len = this.series[0].yData.length,
text;
for (var i = 0; i < len; i++) {
total += this.series[0].yData[i];
}
text = this.renderer.text(
'Total: ' + total,
this.plotLeft,
this.plotTop - 20
).attr({
zIndex: 5
}).add();
}
}
}
Демо:
Я не могу понять, почему у меня не работает.? Я попробовал ваш код, но все равно ничего
Возможно, он находится под другими элементами? Попробуйте изменить значения x и y и проверьте, отображается ли элемент вообще. Кроме того, вы можете попробовать вызвать метод toFront() для текстового элемента svg (подробнее об этом здесь: api.highcharts.com/class-reference/…).
Мне нужен код для круговой диаграммы. Ваш пример хорош, но он для линейной диаграммы.
Визуализатор работает одинаково в линейных и круговых сериях. Проверьте этот пример: jsfiddle.net/BlackLabel/qau0nLz5
Ты был прав. мой текст был скрыт за div. Вот почему я не смог его увидеть. хотя Ваш код помогает.
Рад слышать;)
Я думаю, что эта строка: var data = <?php echo data ; ?> может быть проблемой. В PHP вам нужно $ перед переменными, прямо сейчас вы ничего не пытаетесь достичь (удивлен, что вы не получаете ошибок). В этой строке должно быть $data, если у вас есть какое-то значение для этой переменной. Небольшой совет: перед тем, как установить значение из PHP в JS, инициализируйте var data = '', а затем data = <?php echo $data; ?>. Также я бы рекомендовал: data = <?php echo $data ? $данные: ''; ?> Надеюсь, это решит проблему.