自定义Highcharts主题属性并应用

阅读更多

在使用Highcharts的过程中,你一定想过“美化”Highcharts,也就是社交网站常见的换“皮肤主题“。下面就用一个小的demo来看一看如何自定义一套”皮肤“并且把它应用起来,顺便巩固一下Highcharts一些常用属性的定义。

这里的”皮肤“可不是css,而是js。如:

//用于定义皮肤

//自定义皮肤
var my_skin = {
    //颜色数组,默认从数组第一个元素取色
    colors: ["#33FF33", "#f45b5b", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
		"#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
    //背景透明
    chart: {
		backgroundColor:'rgba(0,0,0,0)',
	},
    
    //title白色字
    title: {
       
        style:{ "color": "#FFFFFF", "fontSize": "18px" }
                //align:"right"
    },
    
//这个属性常用于饼图的时候对每个区域的说明
    plotOptions: {
            pie: {
                innerSize: 100,
                depth: 45,
                dataLabels: {
                	distance:7,
                    enabled: true,
                    color: '#FFFFFF',
                    connectorColor:'#FFFFFF',
//默认是 format: '{point.name}: {point.percentage:.1f} %'显示百分比
                    formatter: function(){//自定义显示
                    	return '' + this.point.name + ':(' + this.y +')';
                    } 
                }
            }
        },
    
    //x,y轴上的字白色
    xAxis: {
        labels: {
            style: {
                color: '#FFFFFF'
            }
        }       
    },
    
    yAxis: {
        title: {
            style:{ "color": "#FFFFFF"}
        },
        markable:{enabled:false},//不显示每一个点的实心
        labels: {
            style: {
                color: '#FFFFFF'
            }
        }, 
       
    },
    
    //图例上的字白色
    legend: {
        itemStyle: {
            font: '9pt Trebuchet MS, Verdana, sans-serif',
            color: '#FFFFFF'
        }
    },
    exporting: {enabled:false},//隐藏导出按钮
   plotOptions: {
		series: {
			dataLabels: {//影响条形图上数字的字体颜色
				color: '#000000'
			}
		}
	}
}

 

如何使用呢?超简单,比如我把上面的js代码定义成一个文件theme.js,只需在定义charts的文件里引入这个theme.js即可,然后:

Highcharts.setOptions(my_skin);//使用自定义皮肤
       
$('#tranCount').highcharts({
    //定义一些charts属性的部分省略
    //....................
});

 需注意:Highcharts.setOptions()的作用范围是全局的,假设你为一个charts使用了这句话,那么本页面的所有charts都会换上这个"皮肤"。所以要想不同的charts使用不同的"皮肤",你必须为每个charts定义自己的皮肤。否则默认的话(没有使用皮肤),它也会被换上已使用主题的皮肤!

 

下面说一个比较隐晦但是十分重要的问题!

注意属性:global: {    useUTC: false }是很重要的,对于我们在中国地区使用的系统而言,如果你这个设置为true或者不设置的话,会莫名其妙少了8个小时。因为如果你不设置为false,则是以世界标准时区为准,而由于中国所在时区为+8,所以经过 Highcharts 的处理后会减去8个小时。——这也是会偶尔出现的比较难以发现的问题。。

因为你如果使用主题了,是Highcharts.setOptions(dark_blue);默认不使用主题的时候我们会发现往往是这样写的:

Highcharts.setOptions({                                                     

            global: {                                                               

                useUTC: true                                                       

            }                                                                       

 

  });

而你现在为了使用主题,已经这样写了Highcharts.setOptions(my_skin);默认就会把这个时区的设置覆盖掉。。而你又不能这样写:Highcharts.setOptions(my_skin,global: { useUTC: true }   );

所以:在自定义皮肤的时候,你别忘了在皮肤主题里面加上这句哦,比如我需要在var my_skin的js加上这句:

global: { useUTC: true }

你可能感兴趣的:(Highcharts,皮肤,常见属性)