hicharts 渐变色主题设置

最新推荐文章于 2023-08-18 11:22:38 发布

原创最新推荐文章于 2023-08-18 11:22:38 发布 · 2.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#highcharts

本文介绍如何为Highcharts图表设置主题样式，包括颜色方案、背景渐变、字体样式等，并展示了如何通过JavaScript代码实现这些定制化的视觉效果。

Highcharts.theme = {
		colors: ['#50B432','#058DC7',  '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
		chart: {
			backgroundColor: {
				linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
				stops: [
					[0, 'rgb(255, 255, 255)'],
					[1, 'rgb(240, 240, 255)']
				]
			},
			borderWidth: 1,
			plotBackgroundColor: 'rgba(255, 255, 255, .9)',
			plotShadow: true,
			plotBorderWidth: 1
		},
		title: {
			style: {
				color: '#000',
				font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
			}
		},
		subtitle: {
			style: {
				color: '#666666',
				font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
			}
		},
		xAxis: {
			gridLineWidth: 1,
			lineColor: '#000',
			tickColor: '#000',
			labels: {
				style: {
					color: '#000',
					font: '11px Trebuchet MS, Verdana, sans-serif'
				}
			},
			title: {
				style: {
					color: '#333',
					fontWeight: 'bold',
					fontSize: '12px',
					fontFamily: 'Trebuchet MS, Verdana, sans-serif'

				}
			}
		},
		yAxis: {
			minorTickInterval: 'auto',
			lineColor: '#000',
			lineWidth: 1,
			tickWidth: 1,
			tickColor: '#000',
			labels: {
				style: {
					color: '#000',
					font: '11px Trebuchet MS, Verdana, sans-serif'
				}
			},
			title: {
				style: {
					color: '#333',
					fontWeight: 'bold',
					fontSize: '12px',
					fontFamily: 'Trebuchet MS, Verdana, sans-serif'
				}
			}
		},
		legend: {
			itemStyle: {
				font: '9pt Trebuchet MS, Verdana, sans-serif',
				color: 'black'

			},
			itemHoverStyle: {
				color: '#039'
			},
			itemHiddenStyle: {
				color: 'gray'
			}
		},
		labels: {
			style: {
				color: '#99b'
			}
		},

		navigation: {
			buttonOptions: {
				theme: {
					stroke: '#CCCCCC'
				}
			}
		}
	};
// Apply the theme
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);

1.在js文件中导入上面主题

2.创建图表前加入渐变代码

 Highcharts.getOptions().colors = Highcharts.map(
		Highcharts.getOptions().colors, function(color) {
			return {
				radialGradient : {
					cx : 0.5,
					cy : 0.3,
					r : 0.7
				},
				stops : [
						[ 0, color ],
						[
								1,
								Highcharts.Color(color).brighten(0.3).get(
										'rgb') ] // darken
				]
			};
	});

3.加载数据时选择颜色_colorIndex

series: [{
        	_colorIndex: 0,
            name: '新异常',
            data: errorStateNew,
            stack: 'male'
        }, {
        	_colorIndex: 1,
            name: '已处理',
            data: errorStateFinish ,
            stack: 'male'
        }, {
        	_colorIndex: 2,
            name: '废弃',
            data: errorStateDiscard,
          stack: 'male'
        }]