Highcharts常用问题总结

<!--[if !supportLists]-->1，  <!--[endif]-->设置标题不显示：title:false

用法：

title: {

        text: false

},

2.时间格式的转换

 用法：

  xAxis: { 

             type: 'datetime', 

             labels: { 

                formatter: function() { 

                    return Highcharts.dateFormat('%Y-%b-%e %H:%M:%S', this.value);                   

                 } 

 

             },

具体时间格式结合API使用.

 

3.y轴默认一个最大值，超过该最大值成倍增长：tickInterval:200

用法：

yAxis: {

                title: {

                    text: 'Temperature (°C)'

                },

                            tickInterval:200

                           

  },

4.饼形图中设置小数位数最多两位处理函数：Highcharts.numberFormat

用法：

plotOptions: {

                pie: {

                    allowPointSelect: true,

                    cursor: 'pointer',

                    dataLabels: {

                        enabled: true,

                        color: '#000000',

                        connectorColor: '#000000',

                        formatter: function() {

                            return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage) +' %';

                        }

                    }

                }

}，

5.图像下面标签的位置：

legend: {

                align: 'left',

                verticalAlign: 'top',

                y: 20,

                floating: true,

                borderWidth: 0

              //该处是顶部靠左可根据自己的需求更改位置

   },

6.X轴或Y轴部分数据省略显示

xAxis: {

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

            labels: {

                step: 3

            }

         //包括本身隔三个显示一个X轴坐标

    },           

7.Y轴最左边显示一条实线：

  yAxis: {

                title: {

                    text: 'Temperature (°C)'

                },

              

                      lineWidth: 2   (y轴显示实线，数字代表实现粗度)

            },

8.去掉右下角的www.highcharts。com信息

credits : {

                                   enabled : true,

                                   text : ""

       },

 

9.通过点击某个按钮删除某条线的数据

$('#button').click(function() {

        chart.series[0].remove();

        this.disabled = true;

        //series[0]是代表第一条线

       

});

<input type="button" id="button" value="测试"/>

 

 

10.设置柱形图的宽度，默认会很宽

    column: { 

                         

                           pointPadding: 0.2, 

                 

                           borderWidth: 0, 

                 

                           pointWidth: 40 

                           //根据这个值变化

                 

    }

11.拖动图形的点可以放大

   chart: {

                renderTo: 'container',

                zoomType: 'xy'

 

       },