highcharts基本属性写法

  1. highcharts的常用属性
$(function () { 
    $('#container').highcharts({                   //图表展示容器,与div的id保持一致
        chart: {
          type: 'column'                         //指定图表的类型,默认是折线图(line)
        },
        colors:['#382787','red'],               //改变图形颜色

        title: {
          useHTML:true,
          text: "我是标题 | <a href='http://www.hcharts.cn' target='_blank'>我是链接</a>"   //指定图表标题,在标题中添加链接
        },

        //title :{
          //text:null                            //隐藏标题
        //}

        subtitle:{
          text:'我是副标题'                     //副标题是非必须的
        },  

        xAxis:{
          categories: ['my', 'first', 'chart']   //指定x轴分组
        },
        xAxis:{
          title:{
            text:'我是x轴的标题'                //指定x轴的标题
          }
        },
        yAxis: {
          title: {
            text: '我是y轴的标题'                  //指定y轴的标题
          }
        },
        yAxis: {                                   //y轴实现自定义函数,此时y轴标题将无法显示
          labels: {   //labels显示间隔,数据类型为number(或int)。水平轴Lables显示行数。(该属性只对水平轴有效)当Lables内容过多时,可以通过该属性控制显示的行数
            formatter:function(){
              if(this.value <=100) { 
                return "第一等级("+this.value+")";
              }else if(this.value >100 && this.value <=200) { 
                return "第二等级("+this.value+")"; 
              }else { 
                return "第三等级("+this.value+")";
              }
            }
          }
        }, 
        series: [{                                 //指定数据列
          name: 'Jane',                            //数据列名
          data: [1, 0, 4]                          //数据
        }, 
        {
          name: 'John',
          data: [5, 
          {
            y:7,
            color:"#bf0b23"
          }, 3],          
        }]
    });
  });

转载于:https://my.oschina.net/u/3052153/blog/847779

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值