HighCharts常用设置

Stella981
• 阅读 859

看到社区里有很多关于highcharts的问题,我做的时候也常来找答案,下面把前两周的问题整理出来:

1. X轴文字斜着放,在xAxis里设置

xAxis: {
                labels: {
                    rotation: -90   //竖直放
                    rotation: -45   //45度倾斜
                }
            }

2. 柱形图柱形的宽度和边框, 在plotOptions里设置

plotOptions: {
    column: {
                pointWidth: 30,     //设置柱形的宽度 
        borderWidth: 0      //设置柱子的边框,默认是1
    }
}

3.柱形图柱子的颜色,可以统一设置,也可以分开设置, 在series里设置

//统一设置,可以在highcharts.js里设置默认值,也可以针对一个柱形图来设置
series: [{
    color:'#f00',   //柱形图颜色统一设为红色
    data:[11,12,13,14,15,16,17]
}]

//分开设置,每个柱子颜色不一样,需要把颜色值存到数据库里
series: [{
                data: [{'color':'#F6BD0F','y':11},
                            {'color':'#AFD8F8','y':12},
                            {'color':'#8BBA00','y':13},
                            {'color':'#FF8E46','y':14},
                            {'color':'#008E8E','y':15},
                            {'color':'#D64646','y':16},
                            {'color':'#8E468E','y':17}], 
            }]

4.Y轴的值不能为小数、且按固定数值来等分, 在yAxis里设置

yAxis: { 
    min: 0,                  //不显示负数 
    allowDecimals:false,     //不显示小数
    tickInterval: 1         //Y轴值按1来等分
}

5.柱形图每个Y轴值显示柱子上的位置, 在series的dataLabels里设置

//显示在柱子的正上方
series: [{
    data:[11,12,13,14,15,16,17],
    dataLabels: {
        enabled: true,    //默认是false,即默认不显示数值
        color: '#666',    //字体颜色
        align: 'center'   //居柱子中间
   }
}]

//显示在柱子上
//在上面基础上再加一个属性,y:20,就是设置数值显示的位置

6.图例说明,默认显示在下面,如果要显示在右边,

//整体即显示在区域右边中间
legend: {
    layout:'vertical',         //竖直显示,默认是水平显示的
    align: 'right',            //图例说明在区域的右边,默认在中间
    verticalAlign: 'middle'    //竖直方向居中,默认在底部
}
点赞
收藏
评论区
推荐文章
待兔 待兔
1年前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
捉虫大师 捉虫大师
3年前
Java问题排查分享
前言最近翻看以前写的PPT,发现了在2019年做的一次技术分享,关于Java问题排查,由于没什么公司机密可言,整理下分享给大家线上问题处理流程直接放PPT截图吧,现在看来依然不过时问题排查可从三个方面入手知识:有些问题,思考一下就有答案,就像传说中多隆那样,回忆下就知道第83行代码有问题工具:当然不是每个人都能做到过目不忘,也有可能这代码完全
Stella981 Stella981
3年前
Highcharts的常用属性及导出SVG
做了好几个项目都用到了Highcharts,好用自然不用多说,这里总结一下每次作图经常用的一些配置,方便以后查看。引入Highcharts非常简单,只需引入对应的js,页面中写入存放表格的div,js中对表格加以配置。配置说明下面是Highcharts官方的基础柱状图的实例配置,我将加入常用的配置并加以说明。想直接体验的朋友可以访问这个地址
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
ThinkPHP 根据关联数据查询 hasWhere 的使用实例
很多时候,模型关联后需要根据关联的模型做查询。场景:广告表(ad),广告类型表(ad\_type),现在需要筛选出广告类型表中id字段为1且广告表中status为1的列表先看关联的设置部分 publicfunctionadType(){return$thisbelongsTo('A
上海张律师 上海张律师
1星期前
英语单词学习页面+单词朗读实现 -- 【2】单词朗读实现 ##HarmonyOS SDK AI##
​注:我需要先强调一下,我的目的不是把官网文档里的东西复制一遍……而是分享自己实际开发过程中遇到的问题和思考仍然先放一下效果图这里对于单词和例句,都是可以通过点击图片进行播报的这个功能的原理是通过文字转语音的形式实现的,之前也写过文章分享过在API9下如何
陈杨 陈杨
1星期前
鸿蒙5莓创横向柱状图xAxis属性详解
大家好,欢迎回来鸿蒙5莓创图表组件的专场,我们这一期来讲解组合图组件中xAxis属性的详细用法。X轴作为图表的重要组成部分,掌握其配置方法对于创建专业的数据可视化至关重要。下面我们将全面解析xAxisConfig对象中的所有属性及其子属性。1.type作用
陈杨 陈杨
1星期前
鸿蒙5莓创图表组合图组件深度讲解:xAxis属性篇
大家好,欢迎回来鸿蒙5莓创图表组件的专场,我们这一期来讲解组合图组件中xAxis属性的详细用法。xAxis是控制X轴显示和样式的重要配置对象,掌握它的各项属性对于定制化图表至关重要。1.type作用:指定X轴的类型类型:String默认值:'data'可选
陈杨 陈杨
1星期前
鸿蒙5莓创图表组件折线类型的属性讲解-xAxis
大家好,欢迎回来鸿蒙5莓创图表组件的专场,我们这一期来讲解折线图组件中xAxis属性的详细用法。xAxis是控制X轴显示和样式的重要配置对象,掌握它的各项属性对于定制化图表至关重要。基础属性type作用:指定X轴的类型类型:String默认值:'data'
陈杨 陈杨
1星期前
鸿蒙5莓创图表组件折线类型的属性讲解-yAxis
大家好,欢迎回来鸿蒙5莓创图表组件的专场,我们这一期来讲解折线图组件中xAxis属性的详细用法。xAxis是控制X轴显示和样式的重要配置对象,掌握它的各项属性对于定制化图表至关重要。基础属性type作用:指定X轴的类型类型:String默认值:'data'