highchart笔记第一天
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--引入 Highcharts-->
<script src="./js/highcharts.js"></script>
<!-- <script src="http://cdn.hcharts.cn/highcharts/themes/gray.js"></script> -->
</head>
<body>
<!-- 图表容器 DOM -->
<!-- Highcharts 图表的高度和宽度是根据 DIV 容器的宽高来设定的，
如果容器没有设定宽高，默认是 宽 400px， 高 400px，另外设置容器的 min-width 属性可以让 highcharts 自适应宽度，
饼图中可以通过设置宽高来让图形填充满整个容器 -->
<!-- 图表样式属性包括 border、backgroundColor、margin、spacing、style等
边框：包括 borderColor、borderRadius、borderWidth
背景：包括 backgroundColor
外边距：包括 margin、marginTop、marginRight、marginBottom、marginLeft
内边距：包括 spacing、spacingTop、spacingRight、spacingBottom、spacingLeft -->
<div id="chart" style="width: 600px;height:400px;" ></div>
</body>
<script>
// 图表配置
var options = {
chart: {
style: {//给图标加样式
fontFamily: "",
fontSize: '12px',
fontWeight: 'bold',
color: '#006cee'
},
type: 'bar' ,
plotBackgroundColor:'red'
/*
plotBackgroundColor ： 绘图区背景颜色
plotBackgroundImage ： 绘图区背景图片
plotBorderColor ： 绘图区边框颜色
plotBorderWidth ： 绘图区边框宽度
plotShadow ： 绘图投影
*/
//指定图表的类型，默认是折线图（line）
////图表类型(line、spline、scatter、splinearea、bar、pie、area、column)
},
title: {
text: '我的第一个图表' // 标题
},
xAxis: {
categories: ['苹果', '香蕉', '橙子'] // x 轴分类
},
yAxis: {
title: {
text: '吃水果个数' // y 轴标题
}
},
credits:{
text: '我想显示的文字', //显示的文字
href: 'http://www.baidu.com', //链接地址
// enabled: false // 禁用版权信息
position:{
//默认显示右下角， align 可配置参数：left、right、center；
//verticalAlign 可配置参数： bottom、top、middle ；
align:'left',
x:300,
verticalAlign:'bottom',
y:-200//像屏幕上方移动
},
style: { //针对文字的样式 样式设置
cursor: 'pointer',
color: 'red',
fontSize: '30px'
}
},
series: [{ // 数据列
name: '小明', // 数据列名
data: [1, 0, 4] // 数据
}, {
name: '小红',
data: [5, 7, 3]
}]
};
// 图表初始化函数
//*图标容器*/
//1.构造函数
var chart = Highcharts.chart('chart', options);
//2.chart.renderTo来制定 无效 要把上面的东东西写在里面
// var charts = Highcharts.chart({
// chart : {
// renderTo : 'chart' // 或 document.getElementById('container')
// }
// });
//3.如果你的页面已经引入了 jQuery，那么还可以 jQuery 插件的形式调用
// $("#container").highcharts({
// // Highcharts 配置
// });
</script>
</html>
