Javascript 在手机上测试时,文本隐藏在图表js中
我正在开发我的应用程序中的图表,它在web浏览器中运行良好,但当我在手机上测试UAT时,在galaxy S5手机上,它隐藏了文本 请让我知道,如果你需要从我这边的任何其他东西,因为我被困在这里Javascript 在手机上测试时,文本隐藏在图表js中,javascript,html,css,angularjs,Javascript,Html,Css,Angularjs,我正在开发我的应用程序中的图表,它在web浏览器中运行良好,但当我在手机上测试UAT时,在galaxy S5手机上,它隐藏了文本 请让我知道,如果你需要从我这边的任何其他东西,因为我被困在这里 function dashboardPieChart() { Highcharts.chart('dashboardPieChart', { colors: [ '#cff484', '#4c89d3', '#
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>
我想这是因为你的屏幕太小,无法正确显示这两个文本 因此,您可以在plotOptions.pie.dataLabels.style中添加选项:textOverflow:“无” 因此,您的打印选项变为:
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'
}
}
}
},
这是一个工作示例: