HighCharts入门
引用HighCharts做图表
第一步 加载HighCharts
方法一:引入官网提供的CDN服务
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
方法二:在官网下载对应的js文件,引入到项目中(文件中)
<script type="text/javascript" src="js/highcharts.js"></script>
第二步 准备一个容器用来加载图标
<div id="myChart" style="height:500px;width:600px;"></div>
//用id标识该容器,以便后面的绑定,一般表格的大小默认是auto(自动),会根据div大小自动改变大小
第三步 配置图表并初始化
一般情况下,Highcharts 包含 :标题(Title)、[ 副标题(subTitle)]、坐标轴(Axis)[ x轴(xAxis)和y轴(yAxis)]、数据列(Series)、数据提示框(Tooltip)、图例(Legend)、版权标签(Credits)等,另外还可以包括导出功能按钮(Exporting)、标示线(PlotLines)、标示区域(PlotBands)、数据标签(dataLabels)等。
方法一:先配置图表内容,后进行初始化,将配置信息绑定到对应容器中。
<script type="text/javascript">
var options = {
chart: {
type: 'bar' //指定图表的类型,默认是折线图(line)
},
title: {
text: '我的第一个图表' // 标题
},
xAxis: {
categories: ['苹果', '香蕉', '橙子'] // x 轴分类
},
yAxis: {
title: {
text: '吃水果个数' // y 轴标题
}
},
series: [{ // 数据列
name: '小明', // 数据列名
data: [1, 0, 4] // 数据
}, {
name: '小红',
data: [5, 7, 3]
}]
};
// 图表初始化函数
var chart = Highcharts.chart('myChart', options);
</script>
方法二:绑定容器并进行初始化
$(function(){
myChart();
function myChart(){
var chart = Highcharts.chart('pieChart', {
chart: {
type: 'bar' //指定图表的类型,默认是折线图(line)
},
title: {
text: '我的第一个图表' // 标题
},
xAxis: {
categories: ['苹果', '香蕉', '橙子'] // x 轴分类
},
yAxis: {
title: {
text: '吃水果个数' // y 轴标题
}
},
series: [{ // 数据列
name: '小明', // 数据列名
data: [1, 0, 4] // 数据
},
{
name: '小红',
data: [5, 7, 3]
}]
});
}
})
如下就是相应的图啦:
提示:两个方法都写在<script type="text/javascript"></script>
内
常用的方法(其他的可以自行查看API)
**饼状图:可以加一个属性color(列表),存放每个扇区的颜色**
eg:colors:[red,yellow,green,...]
**版权是否显示**
credits:{enabled:false}, //去掉版权
**饼状图events事件:**
// 每个扇区是数据点对象,所以事件应该写在 point 下面
point: {
events: { //事件函数
// 鼠标滑过是,突出当前扇区
mouseOver: function() {
this.slice();
},
// 鼠标移出时,收回突出显示
mouseOut: function() {
this.slice();
},
// 默认是点击突出,这里屏蔽掉
click: function() {
return false;
}
}
}
**饼状图内外圈大小设置**
series: [{
size: '80%',//外圈
innerSize: '60%',//内圈
type: 'pie'
}]
偏移量设置:
legend: {
floating:true,//设置偏移
x:-20, //x偏移量
y:20 //y偏移量
}
是否显示图标背景网格(XAxis、YAxis)
splitLine:{show: false},//去除网格线
splitArea : {show : true}//保留网格区域
API为:> https://api.hcharts.cn/highcharts#global
链接: 我的博客.
带尺寸的图片: