highcharts 柱状图插件
来源:互联网 发布:appstore不能更新软件 编辑:程序博客网 时间:2024/06/05 10:56
文档链接:https://api.hcharts.cn/#plotOptions.column.dataLabels.style
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>饼状图</title>
<script src="https://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
</head>
<style type="text/css">
</style>
<body>
<!--描述:插件-->
<div style="width:100%;height:360px;float:left;background: white;">
<div id="container" style="min-width: 310px; height: 360px;margin-left: 10px;"></div>
</div>
</body>
<script type="text/javascript">
window.onload = function() {
var data1 = [1,2,3,4];
var data2 = [5,6,7,8];
var data3 = [9,10,11,12];
/*插件初始化测试*/
Highcharts.chart('container', {
title: {//主标题
text:null
},
subtitle: {//副标题
text: null
},
chart: {//类型
type: 'column'
},
xAxis: {//X轴字体
categories: ['今日', '昨日', '最近一周', '最近一月'],
labels: {
style: {
color: '#8c7070',//颜色
fontSize:'16px' //字体
}
}
},
credits:{//右下角的文本
enabled: false
},
tooltip: {
crosshairs: true
},
series: [{
type: 'column',
name: '红色代表结算',
data: data1,
color : 'red'
}, {
type: 'column',
name: '绿色代表抽成',
data: data2,
color :'#7AFEC6'
}, {
type: 'column',
name: '蓝色代表总金额',
data: data3,
color :'#66B3FF',
fontSize:"9px"
}, {
type: 'pie',
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: true
}
}],
plotOptions: {//柱状图上是否显示数字 enabled:true
series: {
dataLabels: {
enabled: true,
style:{
fontSize:"12px",
color :"#826161",
fontWeight: 'bold',
textOutline: "1px 1px contrast",
fontFamily: "Helvetica Neue,Helvetica,Arial,sans-serif"
}
}
},
column: {
pointPadding: 0.1
}
} ,
chart: {
renderTo: container,
spacingTop: 7,
spacingRight: 0,
spacingBottom: 1,
spacingLeft: 0
}
});
}
</script>
</html>
0 0
- highcharts 柱状图插件
- 饼图柱状图插件 highcharts
- Highcharts 柱状图
- highcharts柱状图
- Highcharts报表之柱状图
- highCharts+Struts2生成柱状图
- highcharts 绘制 柱状图
- Highcharts柱状图常用参数
- HighCharts操作案例-柱状图
- HighCharts静态柱状图实现
- HighCharts柱状图显示百分比
- 柱状图 js工具highcharts
- android highcharts 柱状图例子
- HighCharts 柱状图的实现
- highcharts 柱状图颜色渐变
- Highcharts柱状图数据展示代码
- HighCharts之2D柱状图
- HighCharts柱状图设置渐变色
- 使用jquery获取父元素或父节点的方法
- Objective C block背后的黑魔法
- Extjs6.2.0搭建项目框架
- 实现可点击展开的 TextView
- 前端工程化开发之yeoman、bower、grunt
- highcharts 柱状图插件
- 剑指offer----合并两个有序链表
- mybatis处理自关联
- IntelliJ IDEA使用教程二 项目创建&Tomcat配置
- android多图选择器 图片/视频 单选or多选,以及视频录制。The is Android Image Selector。
- 基础位操作
- svm-支持向量机
- QDataStream的二进制文件显示问题
- ssh- jar 包冲突问题