Highcharts常用问题总结

1,  设置标题不显示: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 ''+ this.point.name +': '+ 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.highchartscom信息

credits : {

                                   enabled : true,

                                   text : ""

       },

 

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

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

        chart.series[0].remove();

        this.disabled = true;

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

       

});

测试"/>

 

 

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

    column:

                         

                           pointPadding: 0.2, 

                 

                           borderWidth: 0, 

                 

                           pointWidth: 40 

                           //根据这个值变化

                 

    }

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

   chart: {

                renderTo: 'container',

                zoomType: 'xy'

 

       },

你可能感兴趣的:(highchart)