Изображение ошибки прикреплено
Я разрабатываю диаграмму в своем приложении, которое отлично работает в веб-браузере, но пока я тестирую изменения, тестируя UAT на телефоне, а затем на телефоне Galaxy S5 он скрывает текст.
Пожалуйста, дайте мне знать, если вам нужно что-то еще с моей стороны, так как я застрял здесь.
function dashboardPieChart() {
Highcharts.chart('dashboardPieChart', {
colors: [
'#cff484',
'#4c89d3',
'#8bbc21',
'#910000',
'#1aadce',
'#492970',
'#f28f43',
'#77a1e5',
'#c42525',
'#a6c96a'
],
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Wallet Balance'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name} RM {point.y:.2f}</b>',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || '#4c651e'
}
}
}
},
credits: {
enabled: false
},
series: [
{
name: 'Balance',
colorByPoint: true,
data: [
{
name: 'Balance',
y: Number($scope.currentBalance.replace(',', '')),
sliced: true,
selected: true
},
{
name: 'Market Cap',
y: 10000 - Number($scope.currentBalance.replace(',', '')),
sliced: true,
selected: true
}
]
}
]
});
}
И код с HTML-страницы похож на b
<div class = "col-lg-6">
<div class = "card">
<div class = "card-body">
<div class = "row">
<div class = "col-12">
<div id = "dashboardPieChart">
<!-- style = "min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"> -->
</div>
</div>
</div>
</div>
</div>
</div>
Я думаю, это потому, что ширина вашего экрана слишком мала для правильного отображения двух текстов.
Таким образом, вы можете добавить опцию: textOverflow: 'none'
в plotOptions.pie.dataLabels.style
.
Таким образом, ваши plotOptions становятся:
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name} RM {point.y:.2f}</b>',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || '#4c651e',
textOverflow: 'none'
}
}
}
},
Это рабочий пример: https://jsfiddle.net/noswx17b/1/