HighCharts(折线图) 学习笔记

2019独角兽企业重金招聘Python工程师标准>>>

HighCharts(折线图) 学习笔记

1.highcharts如果没有指明type类型的话,默认是

 chart: {

  type: 'line'

 },

2.Title为图标的标题,格式:

title: {

text: 'test'

},

还有一个subtitle为子标题,格式相同

3.xAxis设置的是图表中x轴的相关属性(可以设置title)

 其中categories为设置x轴的相关值用数组设置,格式:

xAxis: {

title:{

     text:'cuiasbiuas'

    },

    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

},

4.yAxis设置的是图表中y轴的相关属性(可以设置title)

但是好像不能设置categories,试过,但是没有成功,貌似是自动依据x轴上面的最大值进行增长,但是其中有plotLines属性,用于设置y轴上面的线的相关属性,格式:

yAxis: {

title: {

     text: 'Temperature (°C)'

},

plotLines: [{

     value: 0,

     width: 1,

     color: '#808080'

}]

},

5.Legend属性对图表中数据进行解释的配置,格式:

legend:{

layout:"vertical",   // 设置解释信息横向还是纵向(vertical)排列

borderWidth:1,   // 设置解释信息外围的边框宽度

align:"right",    // 设置解释信息大体位置

verticalAlign:"middle"  // 设置解释信息的具体位置

},

如果没有对legend进行设置,则默认在图表下方居中横向排列显示

6.plotOptions属性对图表中具体数据的相关设置,格式

plotOptions: {

line: {

     dataLabels: {

         enabled: true    

// 设置为true时,图表中的点会显示具体数值,默认为false

     },

     enableMouseTracking: true

// 设置为true时,当鼠标移动到相关数据时会有相关提示,默认为true

}

},

7.对列表进行赋值,格式

series: [{

            name: 'Tokyo',

            data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 36.5, 23.3, 18.3, 13.9, 9.6]

        }, {

            name: 'London',

            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]

        }]

    });

8.用法:

a) Html页面中定义div 必须有相关属性让highcharts能够定位到

b) Js代码中$(‘html中的标识’).highcharts({

对highcharts进行相关设置

.

.

.

})

9.Tooltip 数据提示框,当鼠标移动到相关数据时,弹出的提示信息样式,格式:

tooltip: {

enabled: false,    // 设置是否显示数据提示框,默认为显示

formatter: function() {// 格式化数据提示框

return '<b>'+ this.series.name +'</b><br/>'+this.x +': '+ this.y +'°C';

// 返回数据提示框中的信息

}

},

a) 提示框的相关属性

Tooltip:{

backgroundColor:’color’,  // 背景颜色

borderColor:’color’,   // 边框颜色

borderRadius:10,   // 边框圆角

borderWidth:3,   // 边框宽度

shadow:true,    // 是否显示阴影

animation:true   // 是否启用动画效果

style:{     // 文字内容相关格式

color: “color”,

fontSize:”size”,

fontWeight:”blod”,

fontFamily:”fvbasjnakscvnka”

}

}

b) 图示

 

    

 

转载于:https://my.oschina.net/scymore/blog/634453