关于Highcharts你可能想知道的设置
最近有接触到Highcharts,为了实现想要的效果查阅了不少资料。下面举个栗子,该栗子中可设置图表显示大小、标签位置、设置数据标签的背景透明度、标签边框大小、标签大小、标签字体大小、标签透明的、显示隐藏、标签数值格式化、颜色等。下面放上代码:
var chart2 = { tooltip: { borderColor: '#000000' }, chart: { type: 'column', animation: false, height: 250, //控制图大小 width:280, backgroundColor: 'rgba(0,0,0,0)' }, title: { text: null }, subtitle: { text: '单位:MB', align: 'right', floating: true, verticalAlign: "top", //控制位置 x: 0 }, xAxis: { }, yAxis: { title: { text: null }, visible: false, }, plotOptions: { column: { dataLabels: { enabled: true, // 开启数据标签 color: "333333", crop: false }, pointWidth: 10, enableMouseTracking: false // 关闭鼠标跟踪,对应的提示框、点击事件会失效 }, // tooltip : { // pointFormat : ' <b>{point.y:.2f}</b>' // }, series: { events: { legendItemClick: function(mmm) { for (var i = 0; i < chart2.series.length; i++) { chart2.series[i].hide(); } var visibility = this.visible ? 'visible' : 'hidden'; } }, dataLabels: { enabled: true, verticalAlign: "middle", align: "center", borderRadius: 0, backgroundColor: 'rgba(0, 0, 0, 0)', //设置标签背景透明 borderWidth: 0, //标签边框大小 color: "#666", borderColor: '#5799d4', y: -25, borderHeight: 0, shadow: false, format : '{point.y:.2f}', //保留小数点后两位,实现小数点后的0也显示 style: { weight:'10px', //标签框大小 height:'4px', left:0, padding:0, visibility:'visible', //可见 opacity:'1', //透明度 fontWeight:'8px', //标签字体大小 fontHeight:'4px', fontSize: '3px' } } } }, exporting: { enabled: false }, credits: { enabled: false }, series: [{ name: '近半年' }] };
实现效果图:
相关推荐
报表显示 highcharts 报表显示 highcharts 报表显示 highcharts
jquery Highcharts jquery Highcharts jquery Highcharts
android 调用highcharts.js 实现折线图展示
Highcharts-2.3.5 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。目前HighCharts支持的图表类型有曲线...
Highcharts 制作官方文档,提供所有说明和代码文件
Demo完整代码 博文链接:https://gaojianqi6.iteye.com/blog/1521005
Highcharts-Highslide Highcharts-Highslide Highcharts-Highslide
Highcharts!
HighCharts4.1.9
highcharts练习
为了大家更好的学习highcharts,特地整理了 highcharts的中文帮助文档。 文档主要翻译常用的选项配置,如果想看详细配置请看官网
Highcharts培训.pdf
Highcharts Gantt 7
Highcharts最全示例程序
Highcharts中文API.doc
highcharts去掉水印的方法