hicharts 漸變色主題設定
阿新 • • 發佈:2019-01-05
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' }]