(1) 引用的js文件。可以去https://jshare.com.cn/demos/hhhhDf 下载
<script src=”highchart/highcharts.js”></script>
<script src=”highchart/exporting.js”></script>
(2) html 代码。
<div id=”mainOne” style=”width:50%;height:500px;float:left;”>
</div>
(3) js代码。
var chart = Highcharts.chart(‘mainOne’, {
chart:
{
type: ‘column’,
inverted: true
},
title:
{
text: ‘每月温度变化范围’
},
exporting: {
buttons: {
contextButton: {
menuItems: [{
text: ‘Download PDF’,
onclick: function() {
this.exportChart({type: ‘application/pdf’, filename: ‘curated_by_species’});
}
}, {
text: ‘Download PNG’,
onclick: function() {
this.exportChart({filename: ‘curated_by_species’});
},
separator: false
}]
}
}
},
subtitle:
{
text: ‘2009 挪威某地’
},
xAxis:
{
categories:
[
“amyloid-beta degradation”,
“antibody production”,
“anti-fungal response”,
“antigen presentation”,
“antigen processing”,
“antiviral response”,
“bacteria-killing ability”,
“cell activation”,
“cell adhesion”,
“cell aggregation”,
“cell aging”,
“cell apoptosis”,
“cell autophagy”,
“cell chemotaxis”,
“cell cycling”,
“cell cytotoxicity”,
“cell degranulation”,
“cell development”,
“cell differentiation”,
“cell engraftment”,
“cell exhaustion”,
“cell homing”,
“cell maintenance”
]
},
yAxis:
{
title:
{
text: ‘number’
},
tickPositions: [0, 330, 660, 990,1320,1650] // 指定竖轴坐标点的值
},
tooltip:
{
valueSuffix: ‘ ‘
},
plotOptions:
{
columnrange:
{
dataLabels:
{
enabled: true,
formatter: function ()
{
return this.y;
}
}
}
},
legend:
{
enabled: false
},
credits:
{
enabled:false
},
series: [{
name: ‘number’,
data:
[
2,
31,
3,
29,
9,
206,
96,
379,
60,
9,
38,
324,
78,
31,
17,
102,
10,
242,
1605,
42,
20,
17,
42
]
}]
});
(4) 最后的效果图如下所示。
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)