highcharts基本属性写法

最新推荐文章于 2018-08-15 16:07:49 发布

转载最新推荐文章于 2018-08-15 16:07:49 发布 · 123 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3052153/blog/847779

本文介绍了Highcharts的基本配置方法，包括图表类型设置、颜色修改、标题及副标题添加、坐标轴配置以及数据列指定等内容。通过示例展示了如何创建一个包含自定义样式的柱状图。

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