Highchart学习笔记

       最近由于工作需要，对highchart有个简单的学习，主要参照官网api，下面为自己涉及到的一些内容总结，附带js源码，特此分享出来，希望对大家有帮助！

涉及内容：

隐藏水印标签

自定义线条数组

使用labels标签

图例隐藏及位置改变

基准线的设定

坐标轴刻度线的隐藏

设置坐标线的宽度

将图片作为特殊点的图标

 

function SCAssessment() {

   $('#SCAssessment').highcharts({

       chart: {

           type: 'line'

       },

       title: {

           text: '我的highchart'

       },

       credits: {

           enabled: false //隐藏水印标签

       },

     //线条颜色数组，依次向后取值

       colors: ['#058DC7', '#ED7D31', '#50B432', '#ED561B', '#DDDF00','#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],

       labels: {

           style: {

           //color: '#FF3C3C'

       },

       items: [{

           html: '<span style="color:#FF3C3C">-----</span> 基准时刻线',

           style: {

                    left: '350px',

                    top: '-50px',

                    //color: '#FF3C3C',

                    fontSize: '13px',

                    fontFamily: '微软雅黑'

                }

           }, {

                html: '<spanstyle="font-size:large;color:#59CC8D">◇</span>  基准值',

                style: {

                    left: '367px',

                    top: '-30px',

                    //color: '#006cee',

                    //color: '#59CC8D',

                    fontSize: '13px',

                    fontFamily: '微软雅黑'

                }

           }]

       },

       legend: {

           enabled: false,//隐藏图例

           floating: true,

           align: "right",

           verticalAlign: 'top',

           layout: "vertical",

           labelFormatter: function () {

                return '----- 基准线';

           }

       },

       xAxis: {

           categories: ['2015年1月', '2015年2月', '2015年3月', '2015年4月'],

           plotLines: [{   //一条延伸到整个绘图区的线，标志着轴中一个特定值。

                color: 'RGB(255,60,60)',

                dashStyle: 'Dash',//Dash,Dot,Solid,默认Solid

                width: 1, //线条粗细

                value: 0,  //x轴显示位置，一个标记为1，第一个点的位置为0

                zIndex: 2 //优先级，数值越到，越浮在上面

 

           }],

           tickWidth: 0 //隐藏x轴刻度线

       },

       yAxis: {

           title: {

                text: '单位：万元'

           },

           gridLineWidth: 2, //设置y轴线条粗细

           tickPositions: [0, 20, 40, 60, 80, 100, 120, 140]

       },

       tooltip: {

           enabled: false,

           formatter: function () {

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

           }

       },

       plotOptions: {

           line: {

                dataLabels: {

                    enabled: true

                },

                enableMouseTracking: false

           }

       },

       series: [{

           name: 'London',

           data: [{

                y: 120,

                marker: {

                    symbol:'url(image/yellow.JPG)' //将图片作为点的图标

                }

           } , 70, 50, 45]

       }, {

           name: 'Tokyo',

           data: [120, 90, 70, 60]

       }]

   });

}