在使用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: '<b>{point.name}</b>: {point.percentage:.1f} %'显示百分比 formatter: function(){//自定义显示 return '<b>' + this.point.name + ':(' + this.y +')</b>'; } } } }, //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 图表属性——chart HighCharts 颜色属性——colors HighCharts 版权属性——credits HighCharts 去除版权的几种方法 HighCharts 导出属性——explorting HighCharts HTML标签——labels HighCharts 语言...
使用ajax获取highcharts所需的数据,小程序仅供参考。
highcharts--基本使用(API常用属性),搜集整理,希望对您有帮助,其实您看源码中的例子也行。
jquery Highcharts jquery Highcharts jquery Highcharts
报表显示 highcharts 报表显示 highcharts 报表显示 highcharts
HighCharts属性让你更好的试用HighCharts.js开源绘图工具
零基础highcharts生成报表-简单应用 .用到的文件,非能运行版
使用Highcharts JS v4.1.1完成的自定义服务器导出Image/PDF的Demo 使用类库:SVG+iTextSharp 其中有对SVG的源码做了部分修改,内容如下 1.SvgLinearGradientServer.cs if (effectiveStart == effectiveEnd) { ...
Highcharts-2.3.5 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。目前HighCharts支持的图表类型有曲线...
Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。
Highcharts选项配置详细说明文档
highcharts是个很好的图标插件,我的这个例子不只是柱状图,其他图形我都放到注释里了,可以任意切换
Highcharts是一个纯JavaScript编写的图表库,它提供了一个将交互式的图表添加到您的网站或Web应用程序的简单方法。 Highcharts目前支持折线图,曲线图,块状图,块状-曲线图,柱形图,条形图,饼图和散点图类型。
一个页面,两个双饼图,至于双饼图长什么样,自己去官网查看
Highcharts-Highslide Highcharts-Highslide Highcharts-Highslide
highcharts-flatui-theme 包含平面 ui 调色板的 Highcharts 主题。
highcharts参考手册,列举highcharts属性大全及示例。