自定义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 }