highcharts知识的积累

最新推荐文章于 2022-08-12 10:40:29 发布

开心汉堡包

最新推荐文章于 2022-08-12 10:40:29 发布

阅读量440

点赞数

分类专栏： highcharts

本文链接：https://blog.csdn.net/huwenzhi1991/article/details/43674291

版权

highcharts 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1,去掉右上角的打印及其导出按钮：

exporting: { enabled:false },

如果不设置时，默认为显示。

2,去掉右下角的highcharts.com需要加入以下内容：

credits: { enabled:false },

dataLabels: {

enabled: true, //是否显示值
formatter: function () {
return Highcharts.numberFormat(this.y / 1000, 0, ',') + 'k'; //值显示的函数控制

//return this.y+'%';
},
style: {
color: '#CCC', //显示值的大小
fontWeight: 'bold', // 字体的粗细
textShadow: '1px 1px 1px red' //字的阴影
}
},

4,pointPadding 解释：控制每列之间的距离值，当highcharts图表宽度固定的情况下，此值越大，柱子宽度越小，反之相反。默认此值为0.1

groupPadding解释：用于填充每个值之间的间距，其实和poingPadding有一样的效果。不过这个主要是用于对付存在分组的情况

示例:plotOptions: {
 series: {
 groupPadding:0.3
 }
}, 或者在其中直接写groupPadding=0.3

5,主要是y轴的属性

yAxis:{
tickPixelInterval:10 ,//x,y轴值大小间隔

title: {
text: '百分比'
}
,
min:0,
max:100,
labels: {
formatter:function(){
return this.value+'%' ;
}
}
, //y轴值类型的更改

6,气泡显示保留两位有效数字

tooltip: {
pointFormat: '{point.y:,.2f} %'
},

7，getJSON（url,param,function(){}）；后台赋值给highcharts

<ol start="1" class="dp-c" style="line-height: 1.4em; margin: 0px 0px 1px; padding: 2px 0px; border: 1px solid rgb(209, 215, 220); list-style-position: initial; list-style-image: initial; color: rgb(43, 145, 175); font-family: Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Consolas, 'Courier New', monospace;"><li style="font-size: 1em; margin: 0px 0px 0px 38px; padding: 0px 0px 0px 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"><script type='text/javascript'> </li><li style="font-size: 1em; margin: 0px 0px 0px 38px; padding: 0px 0px 0px 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"> //<![CDATA[ </li><li style="font-size: 1em; margin: 0px 0px 0px 38px; padding: 0px 0px 0px 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"> $(function(){ </li><li style="font-size: 1em; margin: 0px 0px 0px 38px; padding: 0px 0px 0px 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"> //声明报表对象 </li><li style="font-size: 1em; margin: 0px 0px 0px 38px; padding: 0px 0px 0px 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"> var chart = new Highcharts.Chart({ </li><li style="font-size: 1em; margin: 0px 0px 0px 38px; padding: 0px 0px 0px 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"> chart: { </li><li style="font-size: 1em; margin: 0px 0px 0px 38px; padding: 0px 0px 0px 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"> //将报表对象渲染到层上 </li><li style="font-size: 1em; margin: 0px 0px 0px 38px; padding: 0px 0px 0px 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"> renderTo: 'container' </li><li style="font-size: 1em; margin: 0px 0px 0px 38px; padding: 0px 0px 0px 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"> }, </li><li style="font-size: 1em; margin: 0px 0px 0px 38px; padding: 0px 0px 0px 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"> //设定报表对象的初始数据 </li><li style="font-size: 1em; margin: 0px 0px 0px 38px; padding: 0px 0px 0px 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"> series: [{ </li><li style="font-size: 1em; margin: 0px 0px 0px 38px; padding: 0px 0px 0px 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"> data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] </li><li style="font-size: 1em; margin: 0px 0px 0px 38px; padding: 0px 0px 0px 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"> }] </li><li style="font-size: 1em; margin: 0px 0px 0px 38px; padding: 0px 0px 0px 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"> }); </li><li style="font-size: 1em; margin: 0px 0px 0px 38px; padding: 0px 0px 0px 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"> </li><li style="font-size: 1em; margin: 0px 0px 0px 38px; padding: 0px 0px 0px 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"> function getForm(){ </li><li style="font-size: 1em; margin: 0px 0px 0px 38px; padding: 0px 0px 0px 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"> //使用JQuery从后台获取JSON格式的数据 </li><li style="font-size: 1em; margin: 0px 0px 0px 38px; padding: 0px 0px 0px 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"> jQuery.getJSON('http://localhost:8080/JQueryPIC/ajax', null, function(data) { </li><li style="font-size: 1em; margin: 0px 0px 0px 38px; padding: 0px 0px 0px 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"> //为图表设置值 </li><li style="font-size: 1em; margin: 0px 0px 0px 38px; padding: 0px 0px 0px 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"> chart.series[0].setData(data); </li><li style="font-size: 1em; margin: 0px 0px 0px 38px; padding: 0px 0px 0px 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"> }); </li><li style="font-size: 1em; margin: 0px 0px 0px 38px; padding: 0px 0px 0px 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"> } </li><li style="font-size: 1em; margin: 0px 0px 0px 38px; padding: 0px 0px 0px 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"> </li><li style="font-size: 1em; margin: 0px 0px 0px 38px; padding: 0px 0px 0px 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"> </li><li style="font-size: 1em; margin: 0px 0px 0px 38px; padding: 0px 0px 0px 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"> $(document).ready(function() { </li><li style="font-size: 1em; margin: 0px 0px 0px 38px; padding: 0px 0px 0px 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"> //每隔3秒自动调用方法，实现图表的实时更新 </li><li style="font-size: 1em; margin: 0px 0px 0px 38px; padding: 0px 0px 0px 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"> window.setInterval(getForm,3000); </li><li style="font-size: 1em; margin: 0px 0px 0px 38px; padding: 0px 0px 0px 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"> </li><li style="font-size: 1em; margin: 0px 0px 0px 38px; padding: 0px 0px 0px 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"> }); </li><li style="font-size: 1em; margin: 0px 0px 0px 38px; padding: 0px 0px 0px 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"> </li><li style="font-size: 1em; margin: 0px 0px 0px 38px; padding: 0px 0px 0px 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"> </li><li style="font-size: 1em; margin: 0px 0px 0px 38px; padding: 0px 0px 0px 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"> }); </li><li style="font-size: 1em; margin: 0px 0px 0px 38px; padding: 0px 0px 0px 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"> //]]> </li><li style="font-size: 1em; margin: 0px 0px 0px 38px; padding: 0px 0px 0px 10px; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(209, 215, 220); line-height: 18px; background-color: rgb(250, 250, 250);"> </script> </li></ol>

开心汉堡包

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
highcharts知识的积累

1,去掉右上角的打印及其导出按钮：exporting: { enabled:false },如果不设置时，默认为显示。2,去掉右下角的highcharts.com需要加入以下内容：credits: { enabled:false },如果不设置，那么默认为显示。
复制链接

扫一扫

专栏目录