chore(client): improve chart rendering
This commit is contained in:
		
							parent
							
								
									2752858c7c
								
							
						
					
					
						commit
						6ebab5f577
					
				
					 1 changed files with 22 additions and 0 deletions
				
			
		|  | @ -143,6 +143,7 @@ export default defineComponent({ | |||
| 			} | ||||
| 
 | ||||
| 			const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'; | ||||
| 			const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)'; | ||||
| 
 | ||||
| 			// フォントカラー | ||||
| 			Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg'); | ||||
|  | @ -255,6 +256,27 @@ export default defineComponent({ | |||
| 						}, | ||||
| 					}, | ||||
| 				}, | ||||
| 				plugins: [{ | ||||
| 					id: 'vLine', | ||||
| 					beforeDraw(chart, args, options) { | ||||
| 						if (chart.tooltip._active && chart.tooltip._active.length) { | ||||
| 							const activePoint = chart.tooltip._active[0]; | ||||
| 							const ctx = chart.ctx; | ||||
| 							const x = activePoint.element.x; | ||||
| 							const topY = chart.scales.y.top; | ||||
| 							const bottomY = chart.scales.y.bottom; | ||||
| 
 | ||||
| 							ctx.save(); | ||||
| 							ctx.beginPath(); | ||||
| 							ctx.moveTo(x, bottomY); | ||||
| 							ctx.lineTo(x, topY); | ||||
| 							ctx.lineWidth = 1; | ||||
| 							ctx.strokeStyle = vLineColor; | ||||
| 							ctx.stroke(); | ||||
| 							ctx.restore(); | ||||
| 						} | ||||
| 					} | ||||
| 				}] | ||||
| 			}); | ||||
| 		}; | ||||
| 
 | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue