알아보자
2k
2021-06-04 13:19:08
0
83

highchart 이중 x축일 때 하단 x축의 개수를 조절할려면 어떻게 하나요?


highchart 로 x축 상단 하단 둘 다 보여줄려고 하는데 첫번째 x축과 두번째 x축의 개수가 다르니까

첫번째 x축의 값이 날짜가 나오다가 일반 정수로 나와버리는데 이런 문제는 어떻게 처리하나요?

라인 그래프와 면적 그래프가 따로 적용되어야 하는데 그렇지가 않네요..  


HHighcharts.chart('container', {
					    chart: {
					        zoomType: 'xy'
					    },
					    title: {
					        text: ''
					    },
					    subtitle: {
					        text: ''
					    },
					  
					    xAxis: [
					    { // Primary xAxis
					        labels: {
					         
					            format:"{value}",
					            style: {
					                color: Highcharts.getOptions().colors[1]
					            }
					        },
					        title: {
					            text: '시간',
					            style: {
					                color: Highcharts.getOptions().colors[1]
					            }
					        },
					       categories: ['21.06.03.08.00', '21.06.03.08.10', '21.06.03.08.20', '21.06.03.08.30', '21.06.03.08.40', '21.06.03.08.50', '21.06.03.09.00', '21.06.03.09.10', '21.06.03.09.20', '21.06.03.09.30', '21.06.03.09.40'], 
					       endOnTick:true,
					        startOnTick:true,
					    },{ // Secondary xAxis
					    	 labels: {
						        	format: '{value} '  ,
						            style: {
						                color: '#8FAE48'
						            },
						        },
					    	title: {
					            text: '길이 ',
					            style: {
					                color: '#8FAE48'
					            }
					        },
					   
					       min: -5.051,
					     	max: 73.087, 
					       
					        opposite:true,
					        endOnTick:false,
					        startOnTick:false,
					        
					       categories: [-5.051, 0.943, 3.397, 6.8, 9.292, 11.804, 14.179, 17.218, 20.131, 23.362, 26.255, 29.307, 32.152, 34.795, 37.49, 40.961, 44.159, 45.453, 46.895, 47.126, 48.723, 50.74, 52.002, 54.192, 57.019, 59.025, 61.146, 64.187, 65.663, 68.634, 70.391, 73.087], 
					      
					        
					    }],
					    
					    yAxis: [  
					        { // Primary yAxis
			        		 title: {
					            text: '값(m)',
					            style: {
					                color: Highcharts.getOptions().colors[0]
					          	  }
					        	},
				        	labels: {
				            	format: '{value}',
				           	 style: {
				                	color: Highcharts.getOptions().colors[0]
				            	}
					        },
					        min: 0,
					    	max: 11,
					        endOnTick:true,
					        startOnTick:true,
					    }, { // Secondary yAxis
					    	gridLineWidth: 0,
					        title: {
					            text: '값2(m)',
					            style: {
					                color: '#8FAE48'
					            }
					        },
					        labels: {
					        	format: '{value} '  ,
					            style: {
					                color: '#8FAE48'
					            },
					        },
					        min: -0.936,
					     	max: 8.875,
					     	
					        opposite: true,
					    }],
					   
					    plotOptions: {
					        spline: {
					            lineWidth: 2,
					            states: {
					                hover: {
					                    lineWidth: 4
					                }
					            },
					            marker: {
					                enabled: false
					            },
					        },
					    	area: {
					    		 marker: {
					                 enabled: false
					             },
					    	}
					    },
					    credits: {
					        enabled: false
					        },
					    
					    tooltip: {
					        shared: true
					    },
					   
					    series: [
						    {
					        name: '값',
					        type: 'spline',
					        yAxis: 0,
					        data:  [0.49, 0.28, 0.68, 0.93, 0.39,] ,
					        tooltip: {
					            valueSuffix: ' m'
					        }

					    },
					    {
					        name: '값2',
					        type: 'area',
					        yAxis: 1,
					        data: [8.875, 8.836, 8.516, 6.131, 4.755, 4.198, 3.538, 3.148, 3.082, 3.177, 3.343, 3.179, 2.91, 2.38, 1.679, 1.303, 0.691, 0.307, 0.32, 0.085, 0.133, -0.004, -0.245, -0.151, 0.072, 0.322, 0.244, 0.083, 0.051, -0.153, -0.122, -0.007] ,
					        
					        color: '#8FAE48',
					        tooltip: {
					            valueSuffix: 'm'
					        }
					    }
					    ]
					});
0
  • 답변 0

  • 로그인을 하시면 답변을 등록할 수 있습니다.