<script type= "Text/javascript" >
$ (function () {
$ (' #container_2 '). Highcharts ({
Chart: {
type Specifies the bar chart display
Type: ' column ',
},
Title: {
Column Chart title
Text: '
},
Subtitle: {
Text: ' Data cutoff 2017-06 '
},
Credits: {
Enabled:false//Lower right corner does not display logo
},
Exporting: {//highcharts chart export function module.
Enabled:false
},
Xaxis: {
Type: ' Category ',
Labels: {
X-axis Tilt
Rotation:-45,
Style: {
Font size
FontSize: ' 13px ',
Font style
fontFamily: ' Verdana, Sans-serif '
}
}
},
YAxis: {
min:0,
Title: {
Y-Axis Title
Text: ' Unit (million Yuan) '
}
},
Legend: {
Y-Axis
Enabled:false
},
ToolTip: {
Retain two decimal places when getting cursor
Pointformat: ' Cost: <b>{point.y:.2f} million </b> '
},
Let the digital overflow display on the histogram
Plotoptions: {
Column: {
DataLabels: {
Overflow: "None",
Crop:false,
}
}
},
Series: [{
Y-Axis display
Name: ",
Data: [
[' Data fee ', ${ZLF}],
[' Lecture Fee ', ${JKF}],
[' Venue fee ', ${CDF}],
[' Student subsidy ', ${XYBZ}],
[' Other expenses ', ${QTZC}]
],
DataLabels: {
Show Digital y-axis
Enabled:true,
rotation:0,
Color: ' #000000 ',
Align: ' center ',
Y-axis display retains two decimal places
Format: ' {point.y:.2f} ',//One decimal
Font moves up and down the bar chart
y:0,//pixels down from the top
Style: {
Y-Axis font size
FontSize: ' 13px ',
Y-axis font style
fontFamily: ' Verdana, Sans-serif '
}
}
}]
});
});
</script>
<script type= "Text/javascript" >
$ (function () {
$ (' #container_1 '). Highcharts ({
Chart: {
Type Specifies the pie chart display
Type: ' Pie ',
Background color
BackgroundColor: "#FFFFFF",
X:-200,
Shape size
HEIGHT:300,
Left margin
marginleft:-200
},
Credits: {
Enabled:false//Lower right corner does not display logo
},
Title: {
No title on the cookie
Text: ",
},
Subtitle: {
No word on the cookie.
Text: ",
},
Exporting: {
Highcharts chart export function module.
Enabled:false
},
Graphic color
Colors: [' #E2214E ', ' #F7B52B '],
Event of scale displayed next to pie chart
Legend: {
Vertical
Layout: ' True ',
Floating:true,
BackgroundColor: ' #FFFFFF ',
Align: ' right ',
VerticalAlign: ' Top ',
Adjust the scale next to the pie chart up or down
Y:35,
Adjust the proportions on the left or right side of the pie chart
X:-20,
itemmarginbottom:2,//the top and bottom spacing of the legend
Area size
MAXHEIGHT:200,
symbolheight:14,//Legend Height and size
The distance between the small icon and the scale
Symbolwidth:14
},
Plotoptions: {
Pie: {
Allowpointselect:false,
Cursor: ' pointer ',
DataLabels: {
Whether to show the pull line on the pie chart
Enabled:false
},
Showinlegend:true,
Symbolwidth:24,
Point: {
Events: {
Legenditemclick:function (e) {
return false; Direct return False to disable legend click events
}
}
}
}
},
Series: [{
Data: [
[' Special funds ' + ' + ' + ' <span style= ' text-align:center; ><fmt:formatnumber value= "${zxjf/hj*100}" pattern= "##.##" minfractiondigits= "2" ></fmt:formatnumber > ' + '% ' + ' </span> ', <fmt:formatnumber value= "${zxjf/hj*100}" pattern= "##.##" minfractiondigits= "2" > </fmt:formatnumber>],
[' self-financed ' + ' + ' + ' <span style= ' text-align:center; ><fmt:formatnumber value= "${zcjf/hj*100}" pattern= "##.##" minfractiondigits= "2" ></fmt:formatnumber > ' + '% ' + ' </span> ', <fmt:formatnumber value= "${zcjf/hj*100}" pattern= "##.##" minfractiondigits= "2" > </fmt:formatnumber>]
]
}]
});
});
</script>
Note Remember to refer to the Highcharts.js file
Column chart, pie chart javascript