Column chart, pie chart javascript

Source: Internet
Author: User

<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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.