下面是我的Yii 1 highcharts组合图的代码,其中包括饼图,条形图和折线图。对于折线图,我想在进行简单除法后显示10点(即,如果点值为60,则当光标位于该点上方时应显示6)。但是使用我的下面的代码它显示为60/10而不是6.此外,我希望这个除法仅针对折线图而不是其他两个图。请帮我解决这个问题。
<!---Start Combination Chart ----->
<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>
<div id="combination"><div id="container1" style="min-width: 310px; height: 500px; margin: 0 auto"></div></div>
<script>
var x=<?php echo json_encode(array_values($subjectList));?>;
Highcharts.setOptions({
colors: ['blue', '#bd1111', '#1b670e', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
Highcharts.chart('container1', {
title: {
text: '<b>Passed/Failed Students</b>',
margin: 110
},
xAxis: {
categories: x,
title: {
text: '<-------- Name Of Subjects ------->'
}
},
yAxis: {
title: {
text: 'Number Of Students'
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.y}'
}
}
},
credits: {
enabled: false
},
exporting: { enabled: false },
series: [{
type: 'column',
name: 'Passed',
data: <?php echo json_encode($passedMarkList);?>//[60, 60, 41, 23, 49, 34, 23, 44]
}, {
type: 'column',
name: 'Failed',
data: <?php echo json_encode($failedMarkList);?>
},
{
type: 'line',
tooltip: {
pointFormat: '<span>{point.name}</span>: <b>{point.y}/10</b><br/>'
},
name: 'Subject Average GPA',
data: [60, 80, 40, 80, 50, 90, 70, 0, 60, 50],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
},
{
type: 'pie',
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
},
name: 'Total Number Of Students',
data: [
{
name: 'PASSED',
y: <?php echo json_encode($semesterPassStudents);?>,
color: Highcharts.getOptions().colors[0] // Jane's color
},
{
name: 'FAILED',
y: <?php echo json_encode($semesterFailStudents);?>,
color: Highcharts.getOptions().colors[1] // John's color
},
{
name: 'Result Not Yet Published',
y: <?php echo json_encode($resultUnPublished);?>,
dataLabels: {
enabled: false,
},
color: Highcharts.getOptions().colors[5] // John's color
},
],
center: [80, -90],
size: 150,
showInLegend: false,
dataLabels: {
enabled: true,
format: '<b>{point.name}</b><br>{point.percentage:.1f} %',
distance: -30,
}
}]
});
</script>
<!---End Combination Chart----->
以下是我解析的视图页面来源
<!---Start Combination Chart ----->
<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>
<div id="combination"><div id="container1" style="min-width: 310px; height: 500px; margin: 0 auto"></div></div>
<script>
var x=["MA101 - CALCULUS","PH100 - ENGG. PHYSICS","BE100 - ENGG. MECHANICS","BE101-05 - INTRODUCTION TO COMPUTING & PROBLEM SOLVING","BE103 - INTRODUCTION TO SUSTAINABLE ENGG.","EC100 - BASICS OF ELECTRONICS ENGG.","PH110 - ENGG. PHYSICS LAB","EC110 - ELECTRONICS ENGG. WORKSHOP","CS110 - COMPUTER SCIENCE WORKSHOP","U100-2 - MICROPROJECT"];
Highcharts.setOptions({
colors: ['blue', '#bd1111', '#1b670e', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
Highcharts.chart('container1', {
title: {
text: '<b>Passed/Failed Students</b>',
margin: 110
},
xAxis: {
categories: x,
title: {
text: '<-------- Name Of Subjects ------->'
}
},
yAxis: {
title: {
text: 'Number Of Students'
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.y}'
}
}
},
credits: {
enabled: false
},
exporting: { enabled: false },
series: [{
type: 'column',
name: 'Passed',
data: [60,59,61,62,61,62,62,53,59,62]//[60, 60, 41, 23, 49, 34, 23, 44]
}, {
type: 'column',
name: 'Failed',
data: [2,3,1,0,1,0,0,9,3,0] },{
type: 'line',
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}/10 %</b><br/>'
},
name: 'Subject Average GPA',
data: [60, 80, 40, 80, 50, 90, 70, 0, 60, 50],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}, {
type: 'pie',
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
},
name: 'Total Number Of Students',
data: [
{
name: 'PASSED',
y: 46,
color: Highcharts.getOptions().colors[0] // Jane's color
},
{
name: 'FAILED',
y: 16,
color: Highcharts.getOptions().colors[1] // John's color
},
{
name: 'Result Not Yet Published',
y: 2,
dataLabels: {
enabled: false,
},
color: Highcharts.getOptions().colors[5] // John's color
},
],
center: [80, -90],
size: 150,
showInLegend: false,
dataLabels: {
enabled: true,
format: '<b>{point.name}</b><br>{point.percentage:.1f} %',
distance: -30,
}
}]
});
</script>
<!---End Combination Chart----->