我正在为应用程序开发一个图表（android / ios）。我想基于某些条件设置图形的样式，比如操作系统是android，字体大小应该是14dp，如果操作系统是iphone，它应该是9dp。我在函数中获取osname作为参数，我能够设置一些chartproperties，但是我无法根据osname参数更改x轴和y轴的fontsize和其他属性。请帮助设置x和y轴的属性。
<!DOCTYPE html>
<html>
<head>
<script src="./jquery.min.jsl"></script>
<script src="./highcharts.jsl"></script>
<script src="./highcharts-more.jsl"></script>
<meta name="viewport" content="user-scalable=no">
<script >
function renderGraph(graphdata, osname) {
var parsed = JSON.parse(graphdata);
alert(osname);
var s1 = [];
var s2 = [];
var s3 = [];
var s4 = [];
var s5 = [];
var s6 = [];
var cat = [];
for (var i = 0; i < parsed.length; i++) {
cat.push(parsed[i].QUARTER);
s1.push(parsed[i].FTE_OPEX);
s2.push(parsed[i].FTE_CAPEX);
s3.push(parsed[i].AWF_OPEX);
s4.push(parsed[i].AWF_CAPEX);
s5.push(parsed[i].HW_SW);
s6.push(parsed[i].OTHERS);
};
var chartProperties = {};
// height of chart
var graphHeight = 0;
// width of chart
var graphWidth = 0;
// Separating the graph dimensions & styling properties as per OS name & version
if (osname == "iphone") {
chartProperties = {
type : 'column',
plotBackgroundColor : null,
plotBackgroundImage : null,
plotBorderWidth : 0,
plotShadow : false,
height : 250,
width : 300,
marginLeft : 30,
};
} else if (osname == "android") {
chartProperties = {
type : 'column',
plotBackgroundColor : null,
plotBackgroundImage : null,
plotBorderWidth : 0,
plotShadow : false,
height : 700,
marginLeft : 80,
marginTop : 50,
marginBottom : 100
};
}
;
Highcharts.setOptions({
lang : {
numericSymbols : ["K", "M", "G", "T", "P", "E"]
}
});
$(function() {
$('#container').highcharts({
colors : ['#8dafb7', '#f19962', '#e97381', '#f8c465', '#6cd299', '#87cfe2'],
chart : chartProperties,
title : {
text : ''
},
xAxis : {
categories : cat,
tickmarkPlacement : 'on',
tickWidth : 0,
labels : {
y : 20,
style : {
color : '#333333',
fontSize : '9dp',
fontFamily : 'Metropolis-Light',
opacity : '.6'
},
}
},
yAxis : {
gridLineWidth : 0,
min : 0,
offset : 10,
tickAmount : 5,
title : {
text : ''
},
labels : {
align : 'left',
style : {
color : '#333333',
fontSize : '9dp',
fontFamily : 'Metropolis-Light',
opacity : '.5'
},
formatter : function() {
var value = this.axis.defaultLabelFormatter.call(this);
return '$' + (this.value === 0 ? '0K' : value);
}
},
stackLabels : {
style : {
color : '#555555',
fontSize : '11dp',
fontFamily : 'Metropolis-Regular'
},
enabled : true,
formatter : function() {
if (this.total < 1000) {
return '$' + this.total;
} else {
return '$' + (this.total / 1000).toFixed(2) + 'K';
};
}
},
},
legend : {
enabled : false
},
tooltip : {
enabled : false
},
plotOptions : {
series : {
animation : false
},
column : {
stacking : 'normal',
dataLabels : {
enabled : false,
color : (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
credits : {
enabled : false
},
series : [{
name : 'FTE-OpEx',
data : s1,
index : 0,
pointWidth : 20
}, {
name : 'FTE-CapEx',
data : s2,
index : 1,
pointWidth : 20
}, {
name : 'AWF-OpEx',
data : s3,
index : 2,
pointWidth : 20
}, {
name : 'AWF-CapEx',
data : s4,
index : 3,
pointWidth : 20
}, {
name : 'HW/SW',
data : s5,
index : 4,
pointWidth : 20
}, {
name : 'Other',
data : s6,
index : 5,
pointWidth : 20
}]
});
});
}
</script>
</head>
<body id="body">
<div id="container" style="height: 100%; width: 100%; position: center; margin-left: 3%;"></div>
</body>
</html>
答案 0 :(得分：0)
字体大小和其他properties可以像处理图表属性一样进行更新。
function updateChart(obj) {
if (obj.value == "iphone") {
yAxisLabelst={
fontSize:'7px',
color:'green',
cursor:'pointer',
}
chartProperties = {
type: 'column',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
height: 250,
width: 300,
marginLeft: 30,
};
} else if (obj.value == "android") {
yAxisLabelst={
fontSize:'15px',
color:'green',
cursor:'pointer',
}
chartProperties = {
type: 'column',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
height: 700,
marginLeft: 80,
marginTop: 50,
marginBottom: 100
};
}
drawChart(chartProperties,yAxisLabelst)
}
function updateChart(obj) {
if (obj.value == "iphone") {
yAxisLabelst={
fontSize:'7px',
color:'green',
cursor:'pointer',
}
chartProperties = {
type: 'column',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
height: 250,
width: 300,
marginLeft: 30,
};
} else if (obj.value == "android") {
yAxisLabelst={
fontSize:'15px',
color:'green',
cursor:'pointer',
}
chartProperties = {
type: 'column',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
height: 700,
marginLeft: 80,
marginTop: 50,
marginBottom: 100
};
}
drawChart(chartProperties,yAxisLabelst)
}
Highcharts.setOptions({
lang: {
numericSymbols: ["K", "M", "G", "T", "P", "E"]
}
});
function drawChart(chartProperties,yAxisLabelst) {
Highcharts.chart('container', {
chart: chartProperties,
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
},
labels:{
style:yAxisLabelst
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
}#container {
min-width: 310px;
max-width: 800px;
height: 400px;
margin: 0 auto
}<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<select onchange="updateChart(this)">
<option value="" >Select Device </option>
<option value="iphone" >iphone</option>
<option value="android">android</option>
</select>
<div id="container"></div>